CSS3 多列布局

使用CSS3，您可以将元素的文本内容分成多列。

创建多列布局

CSS3引入了多列布局模块，用于以简单有效的方式创建多个列布局。现在，您无需使用浮动框即可创建像在杂志和报纸上看到的布局。这是一个使用CSS3多列布局功能将一些文本分为三列的简单示例。

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; 
}
测试看看‹/›

设置列数或宽度

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; 
}
测试看看‹/›

注：column-width指定了列的最佳宽度。 但是，实际列宽可能会根据可用空间而变宽或变窄。 此属性不应与column-count属性一起使用。。

设置列间隙

您可以使用该column-gap属性指定列之间的间隔。每列之间应用相同的间隙。默认间隔是normal，它等于1em。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    
    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;
    
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}
测试看看‹/›

注意：列规则的宽度不会影响列框的宽度，但是如果列规则的宽度大于间隙，则相邻的列框将与该规则重叠。

CSS3多列属性

下表简要概述了所有多列属性：

属性描述
column-count指定多列元素内的列数。
column-fill指定内容如何跨列分布。
column-gap指定列之间的间隙。
column-rule指定要在每列之间绘制的直线或标尺。
column-rule-color指定列之间的规则的颜色。
column-rule-style指定列之间的规则样式。
column-rule-width指定列之间的规则宽度。
column-span指定一个元素跨越多少列。
column-width指定列的最佳宽度。
columns用于同时设置column-width和column-count属性的简写属性。