9.4.3　使用column-count实现多栏布局

9.4.3　使用column-count实现多栏布局

在CSS3中加入了多栏布局属性column-count，使用该属性可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。由于该属性并未被所有浏览器支持和接受，因此在使用该属性时需要加上厂商前缀（关于厂商前缀的介绍详见13.1节），针对Firefox浏览器，需要将其写为-moz-column-count，针对Safari浏览器或者Chrome浏览器，需要将其写为-webkit-column-count，而IE浏览器不支持该属性。

下例是一篇文章，section元素中有若干个段落。

现在要将正文部分的段落分两栏显示，且两栏的高度一致，如图9-18所示。

图9-18　两栏显示

代码如下：

通过column-count设置的两栏宽度和高度都是相同的，如果不在装该元素的容器（本例中是section）中设置宽度，则多个栏目会平分浏览器的宽度，每栏的宽度视浏览器窗口大小决定。

还可以使用column-gap属性设置多栏之间的间隔距离。column-rule属性在栏与栏之间增加一条间隔线，可以设定该间隔线的宽度、线型和颜色，该属性值的设定方法与CSS中border属性值的设定方法相同。同样，针对Firefox浏览器，需要将其写为-moz-columngap和-moz-column-rule，针对Safari浏览器或者Chrome浏览器，需要将其写为-webkitcolumn-gap和-webkit-column-rule，IE浏览器不支持该属性。

在段落的分栏中间添加2em间隔，并添加1像素、深灰色的实线型分隔线，如图9-19所示，代码如下：

图9-19　在栏与栏之间设置间距以及分隔线