CSS3 多列布局

使用 CSS3,你可以在多列中拆分元素的文本内容。

创建多列布局

CSS3 引入了多列布局模块,用于以简单有效的方式创建多个列布局。现在,你可以创建布局,就像你在杂志和报纸中看到的那样,而不使用浮动框。下面是使用 CSS3 多列布局功能将一些文本拆分为三列的简单示例。

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

设置列数或宽度

CSS 属性 column-countcolumn-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-width 描述列的最佳宽度。然而,根据可用空间,实际列宽可以更宽或更窄。此属性不应与 column-count 属性一起使用。

设置列间隙

你可以使用 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 属性采用与 borderoutline 相同的值。

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 多列属性

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

属性 描述
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