1、多列布局概述
通過 CSS3，您能夠創(chuàng)建多個列來對文本進行布局 - 就像報紙那樣！
2诞帐、常用屬性
| 屬性 | 版本 | 描述 |
|---|---|---|
| columns | CSS3 | 設(shè)置或檢索對象的列數(shù)和每列的寬度。復(fù)合屬性 |
| column-width | CSS3 | 設(shè)置或檢索對象每列的寬度 |
| column-count | CSS3 | 設(shè)置或檢索對象的列數(shù) |
| column-gap | CSS3 | 設(shè)置或檢索對象的列與列之間的間隙 |
| column-rule | CSS3 | 設(shè)置或檢索對象的列與列之間的邊框爆雹。復(fù)合屬性 |
| column-rule-width | CSS3 | 設(shè)置或檢索對象的列與列之間的邊框厚度停蕉。 |
| column-rule-style | CSS3 | 設(shè)置或檢索對象的列與列之間的邊框樣式愕鼓。 |
| column-rule-color | CSS3 | 設(shè)置或檢索對象的列與列之間的邊框顏色。 |
| column-span | CSS3 | 設(shè)置或檢索對象元素是否橫跨所有列慧起。 |
| column-fill | CSS3 | 設(shè)置或檢索對象所有列的高度是否統(tǒng)一菇晃。 |
| column-break-before | CSS3 | 設(shè)置或檢索對象之前是否斷行。 |
| column-break-after | CSS3 | 設(shè)置或檢索對象之前是否斷行蚓挤。 |
| column-break-inside | CSS3 | 設(shè)置或檢索對象內(nèi)部是否斷行谋旦。 |
3、常用屬性說明
3.1 顯示多少列.
（1）如果不設(shè)置 column-count 時
顯示列數(shù) = （總寬度+列間距）/ (列寬度+列間距)
（2）如果不設(shè)置 column-count 時
| 條件 | 顯示列數(shù) |
|---|---|
| (列寬度+列間距)*列數(shù) -列間距 <= 盒子寬度 | 顯示列數(shù)量 |
| (列寬度+列間距)*列數(shù) -列間距 <= 盒子寬度 | (總寬度+列間距）/ (列寬度+列間距) |
3.2 實例效果
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS多列布局</title>
<style type="text/css">
p{
width: 800px;
margin: 5px;
border: 1px solid gray;
}
.div1{
column-width: 200px;
column-count: 3;
column-gap: 100px;
column-rule: 150px solid red;
width: 800px;
border: 1px solid red;
margin: 5px;
}
.div2{
column-width: 200px;
column-count: 3;
column-gap: 100px;
column-rule: 150px solid red;
width: 799px;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<p>
column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 800px;<br> column-rule: 150px solid red;<br>
</p>
<p style="color: red">
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
<=800px<br>
因此顯示列數(shù) = 設(shè)置列數(shù);
<br/>
column-rule-width的值屈尼，不影響列數(shù)顯示。
</p>
<div class="div1">CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴充拴孤。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示脾歧。我們知道，當(dāng)一行文字太長時演熟，讀者讀起來就比較費勁鞭执，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端芒粹、然后換到下一行的行首兄纺，如果眼球移動浮動過大，他們的注意力就會減退化漆，容易讀不下去估脆。所以，為了最大效率的使用大屏幕顯示器座云，頁面設(shè)計中需要限制文本的寬度疙赠，讓文本按多列呈現(xiàn)，就像報紙上的新聞排版一樣朦拖。
</div>
<p>
column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 799px;<br> column-rule: 150px solid red;<br>
</p>
<p style="color: red">
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
>799px<br>
因此顯示列數(shù) = (799+100)/(200+100)=2;
<br/>
column-rule-width的值圃阳，不影響列數(shù)顯示。
</p>
<div class="div2">CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴充璧帝。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示捍岳。我們知道，當(dāng)一行文字太長時睬隶，讀者讀起來就比較費勁锣夹，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端苏潜、然后換到下一行的行首晕城，如果眼球移動浮動過大，他們的注意力就會減退窖贤，容易讀不下去砖顷。所以贰锁，為了最大效率的使用大屏幕顯示器，頁面設(shè)計中需要限制文本的寬度滤蝠，
</body>
</html>
運行效果：
image.png
