3、多列布局——column-count
column-count属性主要用来给元素指定想要的列数和允许的最大列数。
其语法规则:
column-count:auto | <integer>
取值说明:
属性值 | 属性值说明 |
auto | 此值为column-count的默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。 |
<integer> | 此值为整数值,主用来定义元素的列数,取值为大于0的整数,负值无效。 |
例如:将列分成四列显示,代码如下:column-count:4;
style.css代码:
.columns{ padding:5px; border:1px solid green; width:600px; margin:20px auto; -webkit-column-count:2; -moz-column-count:2; -o-column-count:2; -ms-column-count:2; column-count:2; }