簡(jiǎn)介
CSS多列布局繼承自塊級(jí)布局模式，允許簡(jiǎn)單地定義多列文本。
當(dāng)閱讀文字的時(shí)候，從一行末尾移動(dòng)到下一行開(kāi)始處，容易弄錯(cuò)讀到了哪一行。為了最優(yōu)化使用大的顯示屏幕，設(shè)計(jì)中應(yīng)限制文字段落的寬度而并列排布，類似報(bào)紙。
兼容問(wèn)題
由此，可以看出，除了UC瀏覽器之外，以上瀏覽器均支持。
使用
1、列數(shù)和寬度
column-count：設(shè)置列數(shù)，自動(dòng)計(jì)算每列的寬度。
column-width：設(shè)置每列寬度，自動(dòng)調(diào)整列數(shù)，如果寬度不足兩列，則只顯示一
列，寬度也將是失效。
columns：column-count和column-width的簡(jiǎn)寫(xiě)，優(yōu)先保證寬度，在寬度優(yōu)先達(dá)到
指定寬度時(shí)，設(shè)置列數(shù)。
eg. columns：5；
columns：20em；
columns：12 20em；
2、列間隙
column-gap：列之間的間隙建議值為1em。
eg. column-gap：2em; column-gap：20px;
3、優(yōu)雅降級(jí)
多列屬性會(huì)被不支持多列模型的瀏覽器忽略。
注意：
a、不是所有的瀏覽器都支持不帶前綴的屬性。-moz-、-webkit-
b、寫(xiě)的時(shí)候最好寫(xiě)三次：-moz-columns：5；-webkit-columns：5；columns：5；
4、列邊框設(shè)置
column-rule-width：*px 或者 thin(最窄) 或者 medium(中等) 或者 thick(最厚)
column-rule-color：列邊框的顏色
column-rule-style：和border-style的值一樣。
column-rule：復(fù)合屬性。eg. column-rule：2px solid cyan;
5、實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
border: 1px solid red;
padding-bottom: 20px;
/*如果繼續(xù)放大容器時(shí)，會(huì)保證列數(shù)不變，如果能保證最小列寬，給每一列增加寬度*/
/*如果繼續(xù)縮小容器時(shí)，在保證最小列寬的基礎(chǔ)上，會(huì)拆列數(shù)，保證最小列寬*/
column-count: 5;
column-width: 16rem;
column-rule: 2px solid;
column-gap: 4rem;
}
h1{
/*column-span：只有兩個(gè)值，1或者all，默認(rèn)情況下是1。*/
column-span: all; /* 跨列*/
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>童話故事選——安徒生·鄭淵潔</h1>
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
</div>
</body>
</html>
