使用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;
}测试看看‹/›注意：列规则的宽度不会影响列框的宽度，但是如果列规则的宽度大于间隙，则相邻的列框将与该规则重叠。
下表简要概述了所有多列属性：
| 属性 | 描述 |
|---|---|
| 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属性的简写属性。 |