css3多栏布局 – CSS3高级教程

上一章CSS3高级教程请查看：css3动画animation

使用CSS3，你可以将元素的文本内容拆分为多个列。

创建多栏布局

CSS3引入了多栏布局模块，可以方便、高效地创建多栏布局。现在，你可以像在杂志和报纸中看到的那样创建布局，而无需使用浮动框。下面是一个使用CSS3多列布局特性将一些文本拆分为三列的简单示例。

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standard syntax */
}

设置列数或宽度

CSS属性column-count和column-width控制是否显示和显示多少列。column-count属性设置multicol元素中的列数，而column-width属性设置列的期望宽度。

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standard syntax */
}

注意: 列宽度描述了列的最佳宽度。但是，实际的列宽度可能会根据可用的空间而变宽或变窄。此属性不应与列计数属性一起使用。

设置列的间距

可以使用column-gap属性控制列之间的间距，在每一列之间应用相同的间隔，默认的间隙是正常的，相当于1em。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
}

设置列的规则

你还可以在列之间添加一条线，即使用column-rule属性的规则。它是在单个声明中设置规则的宽度、样式和颜色的简写属性，column-rule属性采用与border和outline相同的值。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

注意: 列规则的宽度不影响列框的宽度，但如果列规则的宽度大于间距，则相邻的列框将重叠该规则。

CSS3多列属性

下表提供了所有多列属性的简要概述: