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