CSS3 多列布局列的填充方式column-fill属性

在多列容器中，如果显式设置了容器的高度，往往会由于内容不足，而导致最后面的列没有内容填充，就会出现各列高度不一致的情况。

这种情况下，就可以通过 column-fill属性来控制各列内容的填充方式，可选值为 auto | balance。balance 表示各列的内容均衡填充，auto 表示各列的内容自动填充。

由于多列布局还没有成为正式标准，各浏览器的默认填充方式也没有得到统一。Firefox 浏览器默认是均衡填充，而其他浏览器默认是自动填充。假设为上述容器显式设置高度：

1. div {
2.     height: 140px;
3. }

在Firefox 浏览器中的运行结果如图 9‑9 所示：

图9-9 column-fill:balance效果

从上图可以看出，当 column-fill属性取值 balance时，每一列所填充的内容量相等，其结果是所有列的高度相等，但不会超过容器的高度。这种情况下，当内容不能填满整个容器时，空白区域分布在容器的底部。

目前为止，column-fill属性仅得到 Firefox 浏览器的支持，并且需要添加浏览器私有前缀。如果希望 Firefox与其他浏览器的表现相同，即自动填充，则需要将 column-fill属性显式设置为 auto：

1. div {
2.     …
3.     -moz-column-fill: auto;
4. }

此时，在Firefox 及其他浏览器中的运行结果相同。如图 9‑10 所示：

图9-10 column-fill:auto效果

从上图可以看出，当 column-fill属性取值 auto 时，浏览器会按容器的高度自动填充每列的内容，先填充第1列，再填充第2列，依次类推，直到内容全部填充完成。自动填充时，当内容不能填满整个容器时，空白区域分布在最后一列的末尾。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。