CSS3 Tutorial 《CSS3 教程》

感谢waylau.com提供内容
多列
====

CSS3 多列再需要设计多个布局时是非常有用的。比如,报纸布局。

主要属性如下:

* column-count : 指定元素的列数
* column-rule : 指定的列之间的差距
* column-gap : 设置列之间的宽度,样式和颜色

例子:

.newspaper {
column-count: 3;
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */

column-gap: 40px;
-moz-column-gap: 40px; /* Firefox */
-webkit-column-gap: 40px; /* Safari and Chrome */

column-rule: 4px outset #ff00ff;
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
-webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */
}

## 属性

属性 说明 CSS
column-count 指定元素应分为的列数 3
column-fill 指定如何填充列 3
column-gap 指定列之间差距 3
column-rule 一个用于设置所有列规则的简写属性 3
column-rule-color 指定的列之间颜色规则 3
column-rule-style 指定的列之间的样式规则 3
column-rule-width 指定的列之间的宽度规则 3
column-span 指定一个元素应该横跨多少列 3
column-width 指定列的宽度 3
columns 缩写属性设置列宽和列数 3


## 源码

本文中所用例子源码参见
中 `samples` 目录下的 multiple_columns.html