CSS3多列

通过CSS3，能够创建多个列来对文本进行布局-就像报纸那样。

多列属性：

• column-count
• column-gap
• column-rule

浏览器支持

属性	浏览器支持
column-count
column-gap
column-rule

IE10和Opera支持多列属性。

Firefox需要前缀-moz-. Chrome和Safari需要前缀-webkit-.

注释：IE9以及更早的版本不支持多列属性。

 

CSS3 创建多列

column-count属性规定元素应该被分隔的列数：

div.columnOne {
               width:210px;            height:100px;            margin:20px;            border:2px double black;            column-count:3;        }

CSS3 规定列之间的间隔

column-gap属性规定列之间的间隔：

div.columnOne {
               width:210px;            height:100px;            margin:20px;            border:2px double black;            column-count:3;            column-gap:3px;        }

CSS3 列规则

column-rule属性设置列之间的宽度、样式和颜色规则。

div.columnOne {
               width: 210px;            height: 100px;            margin: 20px;            border: 2px double black;            column-count: 3;            column-gap: 6px;            column-rule: 2px outset #ff0000;        }

新的多列属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
	规定元素应该被分隔的列数。	3
	规定如何填充列。	3
	规定列之间的间隔。	3
	设置所有 column-rule-* 属性的简写属性。	3
	规定列之间规则的颜色。	3
	规定列之间规则的样式。	3
	规定列之间规则的宽度。	3
	规定元素应该横跨的列数。	3
	规定列的宽度。	3
	规定设置 column-width 和 column-count 的简写属性。	3