css3多栏布局 – CSS3高级教程 css多栏布局|CSS

上一章CSS3高级教程请查看：css3动画animation
使用CSS3，你可以将元素的文本内容拆分为多个列。
创建多栏布局【css3多栏布局 – 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-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	同时设置列宽度和列计数属性的简写属性。