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;
}