css3尝鲜(一):css多列布局...

CSS3规范中的多列布局（或者叫分栏）已经于2009年12月17日被W3C作为预推荐标准（Candidate Recommendation）进行发布。该模块的在 W3C上的地址为：http://www.w3.org/TR/css3-multicol/。W3C规范定义的实现多列布局的属性有：

属性名	可能的值	默认值	应用元素
break-after	auto | always | avoid | left | right | page | column | avoid-page | avoid-column	auto	块级元素
break-before	auto | always | avoid | left | right | page | column | avoid-page | avoid-column	auto	块级元素
break-inside	auto | avoid | avoid-page | avoid-column	auto	块级元素
column-count	<integer> | auto	auto	非替换的块级元素 (table元素除外)、 表格单元格、行内块元素
column-fill	auto | balance	balance	多列元素
column-gap	<length> | normal	normal	多列元素
column-rule	<column-rule-width> || <border-style> || [ <color> | transparent ]	同单个元素	多列元素
column-rule-color	<color>	color值	多列元素
column-rule-style	<‘border-style’>	none	多列元素
column-rule-width	<‘border-width’>	medium	多列元素
columns	<‘column-width’> || <‘column-count’>	同单个元素	非替换的块级元素 (table元素除外)、 表格单元格、行内块元素
column-span	1 | all	1	静态、非浮动元素
column-width	<length> | auto	auto	非替换的块级元素 (table元素除外)、 表格单元格、行内块元素

在我们经常阅读的报纸中，一般情况下一个版面被分成多个列进行排版，或者在一般的杂志中，一页被分成2列排版。在CSS3颁布之前，在HTML中实现这样的功能是非常麻烦的。现在，CSS3规范中对多列布局进行了定义，使用CSS样式单就可以轻松搞定了。支持的浏览器目前有：Firefox、Chrome、Safari等。目前，这些浏览器对该标准的支持采取还是扩展的方法，也就是采用-moz、-webkit等浏览器特有的属性，但是，这并不影响对W3C标准的理解。

下面我就举一个简单的例子。下面例子中的div1这个元素，采用column-count属性将div显示的内容划分为2列显示，由于没有特别设置每列的宽度，则列的宽度是自动平均分配的。div2这个div，设置列的宽度和列间距，另外还设置列与列之间的分割线的样式。注意：要查看div2的效果，则浏览器的窗口要宽一些。