1、多列布局概述
通過 CSS3，您能夠建立多個列來對文本進行布局 - 就像報紙那樣！
2、常用屬性
| 屬性 | 版本 | 描述 |
|---|---|---|
| columns | CSS3 | 設定或檢索對象的列數和每列的寬度。複合屬性 |
| column-width | 設定或檢索對象每列的寬度 | |
| column-count | 設定或檢索對象的列數 | |
| column-gap | 設定或檢索對象的列與列之間的間隙 | |
| column-rule | 設定或檢索對象的列與列之間的邊框。複合屬性 | |
| column-rule-width | 設定或檢索對象的列與列之間的邊框厚度。 | |
| column-rule-style | 設定或檢索對象的列與列之間的邊框樣式。 | |
| column-rule-color | 設定或檢索對象的列與列之間的邊框顔色。 | |
| column-span | 設定或檢索對象元素是否橫跨所有列。 | |
| column-fill | 設定或檢索對象所有列的高度是否統一。 | |
| column-break-before | 設定或檢索對象之前是否斷行。 | |
| column-break-after | ||
| column-break-inside | 設定或檢索對象内部是否斷行。 |
3、常用屬性說明
3.1 顯示多少列.
（1）如果不設定 column-count 時
顯示列數 = （總寬度+列間距）/ (列寬度+列間距)
（2）如果不設定 column-count 時
| 條件 | 顯示列數 |
|---|---|
| (列寬度+列間距)*列數 -列間距 <= 盒子寬度 | 顯示列數量 |
| (總寬度+列間距）/ (列寬度+列間距) |
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>
是以顯示列數 = 設定列數;
<br/>
column-rule-width的值，不影響列數顯示。
</p>
<div class="div1">CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀布局模式的有力擴充。這種新文法能夠讓WEB開發人員輕松的讓文本呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。是以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文本的寬度，讓文本按多列呈現，就像報紙上的新聞排版一樣。
</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>
是以顯示列數 = (799+100)/(200+100)=2;
<br/>
column-rule-width的值，不影響列數顯示。
</p>
<div class="div2">CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀布局模式的有力擴充。這種新文法能夠讓WEB開發人員輕松的讓文本呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。是以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文本的寬度，
</body>
</html>
運作效果：
image.png
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)