淺談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多列佈局

關於多列佈局

以上是淺談CSS3新特性之多列佈局模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！