為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種布局在報紙和雜志上都使用了幾十年了，但要在Web頁面上實現(xiàn)這樣的效果還是有相當大的難度，慶幸的是，CSS3的多列布局可以輕松實現(xiàn)。接下來咱們一起學習多列布局相關的知識。
語法：
columns：<column-width> || <column-count>
多列布局columns屬性參數(shù)主要就兩個屬性參數(shù)：列寬和列數(shù)。
|
參數(shù) |
參數(shù)說明 |
|
<column-width> |
主要用來定義多列中每列的寬度 |
|
<column-count> |
主要用來定義多列中的列數(shù) |
舉例：要顯示2欄顯示，每欄寬度為200px，代碼為：
columns: 200px 2;
到目前為止大部分主流瀏覽器都對其支持：
在右側(cè)CSS編輯器的第6-10行輸入正確代碼，將上例中兩欄布局顯示成三欄布局，每欄寬度為150px。注意每個瀏覽器的兼容性！
如下圖所示：
溫馨提示：案例相關效果要與上圖一致，才算通過哦！否則請再看一下上面的知識點！
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
