揭秘CSS(第 1 版)
9.2.4 列的填充方式
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

多列布局

跨列

列间隙和边框

多列布局

列的填充方式

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

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

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

div {
    height: 140px;
}

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

column-fill:balance效果
图9-9 column-fill:balance效果

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

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

div {
    …
    -moz-column-fill: auto;
}

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

column-fill:auto效果
图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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验