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 属性设置多列元素内的列数，而 column-width 属性设置所需的列宽。
p {
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 150px; /* 标准语法 */
}注意： 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;
/* 标准语法 */
column-count: 3;
column-gap: 100px;
}设置列规则
您还可以在列之间添加一条线，即使用 column-rule 属性的规则。 它是一个简写属性，用于在单个声明中设置规则的宽度、样式和颜色。 column-rule 属性采用与边框和轮廓相同的值。
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 属性的简写属性。 |
Advertisements