css3 多列

多列属性：

1、column-count：元素被分隔的列数

2、column-gap：列之间的间隔

3、column-rule：设置所有column-rule-* 属性的的简写属性

4、column-fill：如何填充列

5、column-rule-color：列之间规则的颜色

6、column-rule-style：列之间规则的样式

7、column-rule-width：列之间规则的宽度

8、column-span：元素应该横跨的列数

9、column-width：列的宽度

10、columns：设置column-width 和 column-count的简写属性

column-count：

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-count 属性。

Firefox 支持替代的 -moz-column-count 属性。

Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性

语法：

column-count: number|auto;

// number：元素内容将被划分的最佳列数

// auto：由其他属性决定列数，比如‘column-width’

column-gap：

浏览器支持：同column-count相同

语法：

column-gap: length|normal;

// length：把列间的间隔设置为指定的长度

// normal：常规间隔，一般是1em

column-rule：

浏览器支持：同column-count相同

语法：

column-rule: column-rule-width column-rule-style column-rule-color;

// column-rule-width：设置列之间的宽度规则

// column-rule-style：设置列之间的样式规则

// column-rule-color：设置列之间的颜色规则

column-fill：

浏览器支持：主流浏览器都不支持 column-fill 属性

语法：

column-fill: balance|auto;

// balance：对列进行协调，浏览器应对列长度的差异进行最小化处理

// auto：按顺序对列进行填充，列长度会各有不同

column-rule-color：

浏览器支持：同column-count相同

语法：

column-rule-color: color;

// color：颜色

column-rule-style：

浏览器支持：同column-count相同

语法：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

// hidden：定义隐藏规则

// dotted：定义点状规则

// dashed：定义虚线规则

// solid：定义实线规则

// double：定义双线规则

// groove：定义3D grooved 规则，该效果取决于宽度和颜色值

// ridge：定义3D ridged 规则，该效果取决于宽度和颜色值

// insert：定义3D insert 规则，该效果取决于宽度和颜色值

// outset：定义3D outset 规则，该效果取决于宽度和颜色值

column-rule-width：

浏览器支持：同column-count相同

语法：

column-rule-width: thin|medium|thick|length;

// thin：纤细

// medium：中等

// thick： 宽厚

// length：规则的宽度

column-span：

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-span 属性。

Safari 和 Chrome 支持替代的 -webkit-column-span 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性

语法：

column-sapn: 1|all;

// 1：元素应横跨一列

// all：元素应横跨所有列、

column-width：

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-width 属性。

Firefox 支持替代的 -moz-column-width 属性。

Safari 和 Chrome 支持替代的 -webkit-column-width 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性

语法：

column-sapn: auto|length;

// auto：由浏览器觉得列宽

// length：规定列的宽度

columns：

浏览器支持：

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性

语法：

columns: column-width column-count;

// column-width：列的宽度

// column-count：列数