“Multi-column”譯成中文就是“多列”，這個”Multi-column”是W3C給CSS3增加的一個多列布局模塊（CSS Multi-column Layout Module）。它主要應用在文本的多列布局方面，對于文本的多列布局我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示

1. 列數和列寬：column-count;column-width;columns

2. 列的間距和分列樣式：column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule

3. 列的分欄符：break-before;break-after;break-inside

4. 跨越列：column-span

5. 填充列：column-fill

一. column-count

作用：column-count作用主要是用來描述一個Multi元素的列數

語法：column-count: auto || 數字

取值說明：

1. auto：此值為column-count的默認值，當column-count沒有設置任何值時，默認的值就是auto，此時的欄數是根據別的參數來確定的，比如說列寬width

2. 數字：這里可以是任何正整數數字，但不可以帶有任何單位，用來表示Multi元素分列的列數

HTML：

CSS：

首先看第一種情況：column-count:auto。前面也說過，當column-count取值為auto時，元素分欄是由其他屬性決定的比如說，比如這里的column-width，具體我們來看代碼如何實現

其實column-count值為auto時，可以不要顯式的設置，因為其默認值就是auto，所以上面的代碼中大家可以嘗試的把column-count:auto這個去掉，看看結果不是不是一樣。這里有一點需要說明的就是當只用column-width來控制顯示的列數時，其column-width的取值最好不要超過下面公式計算出來的值

就拿本例來說，n=2,font-size:14px;那么column-width的值應該是(400-14)/2=193px（Opera下最好再減1個px，當然如果你是中文的話也最好這樣做，減1-2px，至于為什么，我也說不清楚。）;當你把column-width值大于193px時，只會顯示一列

上面是column-count取值為auto的使用，現在一起來看其取值為具體數值時的應用，基于前面的實例，把列數換成三列

二. column-width

作用：column-width屬性是用來控制Multi元素的列寬

語法：column-width: <length> || auto

取值說明：

1. auto:此值是其默認值。如果column-width設置值為auto或者沒有顯式的設置值時，此時Multi元素的列寬將由其他屬性來決定，比如前面的實例就是由column-count來決定的（當然column-count的值不能為auto了，不然是無效果的）

2. <length>：此值使用固定值來設置Multi元素的寬度，其單位可以是px或者em；但不能是負值

首先來看一個普通的例子，這里所說的普通就是指元素分列的列寬不指定確定的寬度值，并且其他參數都為默認值

從效果中清楚的知道，給Multi元素僅設置auto是沒有任何效果的，因為此時的值是需要根據元素的列數來定的，在這里并沒有指定列數的值，所以默認為1列

在上面的實例的基礎上，變通一下，給他加上一個column-count:2

注：當column-width為auto時需要配合column-count的設置才能有分列效果

總結：count和width兩個屬性不能同時都為auto，只能其中一個值為auto

特例：當列的寬度大于元素容器的寬度的情況

上圖效果告訴我們，雖然設置的列寬大于元素容器的寬度，但并不會讓元素內容按列的寬度進行布局從而撐破元素容器，而是會把列寬降到與元素容器寬度相等

三. columns

作用：columns是把前面兩個屬性合并在一起使用

語法：columns: column-width || column-count

取值說明：olumn-width和column-count分別是指列的寬度和列數

總結

以上是生活随笔為你收集整理的CSS之Multi-columns的列数和列宽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。