淺談CSS3新特性之多欄版面配置模組

CSS3新增了一個多欄版面配置模組（Multi-column Layout Module），主要應用在文本的多欄版面配置方面。

Multi-column可分為：

①　列數和列寬：column-count、column-width、columns

column-count：值為正整數，不帶單位，表示Multi-column分列的列數，預設為auto（列數根據column-width等其他參數來定）。IE不支援該屬性，在Firefox和Webkit下需要加上首碼-moz和-webkit。

column-width：表示Multi-column的列寬，其單位是px或em，但不能是負數，預設為auto（列數根據column-count等其他參數來定，但column-count此時不能為auto）。IE不支援該屬性，Opera11+支援，在Firefox和Webkit下需要加上首碼-moz和-webkit。

columns：把column-width和column-count兩個屬性合并在一起使用。這種簡寫入模式只在Webkit和Opera下支援，Firefox不支援。

若同時設定了column-width和column-gap，則實際列寬會根據column-gap調整，不一定等於設定的column-width值。

當設定的列寬大於元素容器的寬度時，並不會讓元素內容按列寬進行布局而撐破容器，只會把列寬降到與容器寬度相等。

為了分列能適應各種螢幕大小，最好設定一個確切的列寬或列數，並相應指定相關屬性，如元素的width、column-gap、column-rule-width等，如果column-gap、column-rule-width使用預設值，在多列設計中最好明確寫定好、column-width和column-count的值。

②　列的間距和分列樣式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule

跨列布局中，column-gap相當於兩列之間的空白，類似於margin；而column-rule相當於一條分隔線，類似於border。column-gap和olumn-rule是有高度的，其高度和列等高，最大區別是column-gap沒有任何樣式，且在列與列之間佔有一定的空間，而column-rule有一定的樣式，類似於border有樣式。

column-gap單位是px或em，但不能是負數，預設值為normal（1em）。IE不支援該屬性，Opera11+支援，在Firefox和Webkit下需要加上首碼-moz和-webkit。

雖然column-gap可以用來改變相鄰列之間的距離，但在多列元素同時設定了column-width時，column-gap與column-width之和大於多列元素總寬度時，會導至列被撐破，並以第一列顯示，此時的列寬自動調節到元素的總寬度。

column-rule同樣具有border類似的屬性：寬度column-rule-width（預設值為medium），樣式column-rule-style（預設值為none），顏色column-rule-color，不同的是border佔有一定的空間位置，而column-rule不佔有任何的空間位置，column-rule-width增大並不會影響列的布局，只會將其往元素兩邊擴充，直到元素邊緣為止。

③　列的分欄符號：break-before、break-after、break-inside

目前支援的瀏覽器很少，暫不介紹。

④　填充列：column-fill

目前支援的瀏覽器很少，暫不介紹。

⑤　跨越列：column-span

column-span主要用來定義一個分列元素中的子項目能跨列多少列。有時需要某個內容或某個標題不進行任何分列，需要其橫跨所有列，此時就需要用到column-span屬性。預設值為none，表示不跨越任何列；all表示跨越所有列。目前支援的瀏覽器只有Safari、Chrome、Opera11+，在Webkit下需要加上首碼-webkit。

.multiColumns {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 30px;-webkit-column-gap: 30px;column-gap: 30px;}.multiColumns h1 {background: red;-webkit-column-span: all;column-span: all;}

相關推薦：

布局方案之-多欄版面配置

HTML- css多欄版面配置

關於多欄版面配置