使用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属性的简写属性。 |