CSS3 多列布局

Created: October-16, 2018

使用 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-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 属性采用与 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 多列属性

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

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