一.多列屬性：
| Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
|---|---|---|---|
| columns | css3 | 無 | 設置或檢索對象的列數和每列的寬度。複合屬性 |
| column-width | CSS3 | 無 | 設置或檢索對象每列的寬度 |
| column-count | CSS3 | 無 | 設置或檢索對象的列數 |
| column-gap | CSS3 | 無 | 設置或檢索對象的列與列之間的間隙 |
| column-rule | CSS3 | 無 | 設置或檢索對象的列與列之間的邊框。複合屬性 |
| column-rule-width | CSS3 | 無 | 設置或檢索對象的列與列之間的邊框厚度。 |
| column-rule-style | CSS3 | 無 | 設置或檢索對象的列與列之間的邊框樣式。 |
| column-rule-color | CSS3 | 無 | 設置或檢索對象的列與列之間的邊框顏色。 |
| column-span | CSS3 | 無 | 設置或檢索對象元素是否橫跨所有列。 |
| column-fill | CSS3 | 無 | 設置或檢索對象所有列的高度是否統一。 |
| column-break-before | CSS3 | 無 | 設置或檢索對象之前是否斷行。 |
| column-break-after | CSS3 | 無 | 設置或檢索對象之前是否斷行。 |
| column-break-inside | CSS3 | 無 | 設置或檢索對象內部是否斷行。 |
1.columns複合屬性；（隊列寬度和列數的複合屬性）
<style>
.big{
-moz-columns:200px 2 ;/*火狐的Gecko內核*/
-webkit-columns:200px 2 ;/*谷歌webkit內核*/
-ms-columns:200px 2 ;/*IE的Trident內核*/
columns: 200px 2 ;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
<div>列2</div>
<div>列3</div>
<div>列4</div>
<div>列5</div>
<div>列6</div>
</div>
</body><style>
.big{
-moz-column-width:100px;/*火狐的Geock的內核*/
-ms-column-width:100px;/*Ie的Trident的內核*/
-webkit-column-width: 100px;/*谷歌內核*/
column-width: 100px;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
<div>列2</div>
<div>列3</div>
<div>列4</div>
<div>列5</div>
<div>列6</div>
</div>原文鏈接：http://caibaojian.com/multi-column.html
column-count
設置或檢索對象的列數·
column-count：<integer> | auto
- <integer>：用整數值來定義列數。不允許負值
- auto：根據column-width自定分配寬度
column-gap
設置或檢索對象的列與列之間的間隙·
column-gap：<length> | normal
- <length>：用長度值來定義列與列之間的間隙。不允許負值
- normal：與font-size大小相同。假設該對象的font-size爲16px，則normal值爲16px，類推
原文鏈接：http://caibaojian.com/multi-column.html
設置或檢索對象的列與列之間的邊框厚度。·
column-rule-width：<length> | thin | medium | thick
- <length>：用長度值來定義邊框的厚度。不允許負值
- medium：定義默認厚度的邊框。
- thin：定義比默認厚度細的邊框。
- thick：定義比默認厚度粗的邊框。
設置或檢索對象的列與列之間的邊框樣式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
- none：無輪廓。column-rule-color與column-rule-width將被忽略
- hidden：隱藏邊框。
- dotted：點狀輪廓。
- dashed：虛線輪廓。
- solid：實線輪廓
- double：雙線輪廓。兩條單線與其間隔的和等於指定的column-rule-width值
- groove：3D凹槽輪廓。
- ridge：3D凸槽輪廓。
- inset：3D凹邊輪廓。
- outset：3D凸邊輪廓。
.big{
-ms-columns:200px 3;/*ie的Trident內核*/
-moz-columns: 200px 3;/*火狐的Geock內核*/
-webkit-columns: 200px 3;/*谷歌內核*/
columns: 200px 3;
-ms-column-gap:20px;
-moz-column-gap:20px;
-webkit-column-gap;20px;
column-gap:20px;
column-rule: 2px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
<div>列2</div>
<div>列3</div>
<div>列4</div>
<div>列5</div>
<div>列6</div>
</div>原文鏈接：http://caibaojian.com/multi-column.html
設置或檢索對象元素是否橫跨所有列。·
column-span：none | all
- none：不跨列
- all：橫跨所有列
設置或檢索對象所有列的高度是否統一。·
column-fill：auto | balance
- auto：列高度自適應內容
- balance：所有列的高度以其中最高的一列統一
http://caibaojian.com/multi-column.html