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