通過閱讀和學習書籍《CSS3實戰》總結
《CSS3實戰》/成林著.—北京機械工業出版社2011.5
多列布局適合純文字版式設計，如報紙內和雜誌類網頁佈局，不適合做網頁結構佈局。靈活使用多列布局特性，可以實現在多列中顯示文字和圖片，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。
兼容性參考：http://www.w3.org/TR/css3-multicol/
columns屬性–定義多列布局
columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性可以同時定義多列的數目和每列的寬度。基本語法如下：
columns ： <column-width> || <column-count>取值簡單說明：
<column-width>:定義每列的寬度。
<column-count>:定義列數。column-width屬性：定義列寬度
column-count屬性：定義列數
column-width:<length> | auto
column-count:<integer> | auto取值簡單說明：
<length>：由浮點數字和單位標識符組成的長度值。不可爲負值。
auto：根據瀏覽器計算值自動設置。
<integer>:定義欄目的列數，取值爲大於0的整數。如果column-width和column-count屬性沒有明確值，即該值爲最大列數。
column-gap屬性–定義列間距
column-gap：normal | <length>取值簡單說明：
normal：根據瀏覽器默認設置進行解析，一般爲1em。
<length>:由浮點數字和單位標識符組成的長度值，不可爲負值。
column-rule屬性–定義列邊框樣式
column-rule：<length> | <style> | <color> | <transparent>取值簡單說明：
<length>:由浮點數字和單位標識符組成的長度值，不可爲負值。功能與column-rule-width屬性相同。
<style>:定義列邊框樣式。功能與column-rule-style屬性相同。
<color>:定義列邊框的顏色。功能與column-rule-color屬性相同。
<transparent>:設置邊框透明顯示。
column-span屬性–定義跨列顯示
column-span：1 | all取值簡單說明：
1：只在本欄中顯示。
all：將橫跨所有列，並定位在列的Z軸之上。
column-fill屬性–定義欄目高度
column-fill ： auto | balance簡單取值說明：
auto：各列的高度隨其內容的變化而自動變化。
balance：各列的高度將會根據內容最多的那一列的高度進行統一。
分列打印（略）
參考文章：
實戰體驗：
HTML代碼：
<body>
<h1>故都的秋（選段）</h1>
<h2>郁達夫</h2>
<p> 秋天，無論在什麼地方的秋天，總是好的；可是啊，北國的秋，卻特別 地來得清，來得靜，來得悲涼。我的不遠千里，要從杭州趕上青島，更要從青島趕上北平來的理由，也不過想飽嘗一嘗這"秋"，這故都的秋味。 </p>
<p>江南，秋當然也是有的；但草木雕得慢，空氣來得潤，天的顏色顯得淡，並且又時常多雨而少風；一個人夾在蘇州上海杭州，或廈門香港廣州的市民中間，渾沌沌地過去，只能感到一點點清涼，秋的味，秋的色，秋的意境與姿態，總看不飽，嘗不透，賞玩不到十足。秋並不是名花，也並不是美酒，那一種半開，半醉的狀態，在領略秋的過程上，是不合適的。 </p>
<p>不逢北國之秋，已將近十餘年了。在南方每年到了秋天，總要想起陶然亭的蘆花，釣魚臺的柳影，西山的蟲唱，玉泉的夜月，潭柘寺的鐘聲。在北平即使不出門去罷，就是在皇城人海之中，租人家一椽破屋來住着，早晨起來，泡一碗濃茶，向院子一坐，你也能看到很高很高的碧綠的天色，聽得到青天下馴鴿的飛聲。從槐樹葉底，朝東細數着一絲一絲漏下來的日光，或在破壁腰中，靜對着像喇叭似的牽牛花（朝榮）的藍朵，自然而然地也能夠感覺到十分的秋意。說到了牽牛花，我以爲以藍色或白色者爲佳，紫黑色次之，淡紅色最下。最好，還要在牽牛花底，教長着幾根疏疏落落的尖細且長的秋草，使作陪襯。 </p>
<p> 北國的槐樹，也是一種能使人聯想起秋來的點綴。象花而又不是花的那一種落蕊，早晨起來，會鋪得滿地。腳踏上去，聲音也沒有，氣味也沒有，只能感出一點點極微細極柔軟的觸覺。掃街的在樹影下一陣掃後，灰土上留下來的一條條掃帚的絲紋，看起來既覺得細膩，又覺得清閒，潛意識下並且還覺得有點兒落寞，古人所說的梧桐一葉而天下知秋的遙想，大約也就在這些深沉的地方。 </p>
<p>秋蟬的衰弱的殘聲，更是北國的特產；因爲北平處處全長着樹，屋子又低，所以無論在什麼地方，都聽得見它的啼唱。在南方是非要上郊外或山上去才聽得到的。這秋蟬的嘶叫，在北平和蟋蟀耗子一樣，簡直像是家家戶戶都養在家裏的家蟲。 </p>
<p> 還有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像樣。 </p>
</body>基礎CSS3代碼
<style type="text/css" media="screen">
h1 {
color:#333333;
background:#DCDCDC;
padding:5px 8px;
font-size:20px;
text-align:center;
padding:12px;
}
h2 {
font-size:16px;
text-align:center;
}
p {
color:#333333;
font-size:14px;
line-height:180%;
text-indent:2em;
}
</style>未設置多列布局演示效果：
實戰體驗一：設計文章多欄顯示
再上面基礎CSS3代碼基礎上補充：
body {
-webkit-columns: 250px 3;
columns: 250px 3;//設計網頁文檔分三欄顯示，每欄寬度爲250px
}演示效果：
實戰體驗二：設計固定寬度的欄目版面
再上面基礎CSS3代碼補充：
body {/*定義網頁列寬爲300px,則網頁中每個欄目的最大寬度爲300px*/
-webkit-column-width:300px;
-moz-column-width:300px;
column-width:300px;
}演示效果：
實戰體驗三：設計固定列數的版面
再上面基礎CSS3代碼補充：
<style type="text/css" media="screen">
body {/*設置文檔內容爲固定的三列*/
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
}演示效果：
實戰體驗四：設計疏朗的文檔版面
再上面基礎CSS3代碼基礎上補充：
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;//定義頁面內容顯示爲3列
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;//定義列間距爲3em，默認爲1em
line-height:2.5em;
}演示效果：
實戰體驗五：爲多列布局版面設計邊框效果
再基礎CSS3代碼基礎上補充：
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;
line-height:2.5em;
-webkit-column-rule:dashed 2px gray;
-moz-column-rule:dashed 2px gray;
column-rule:dashed 2px gray; //定義列邊框爲2像素寬的灰色虛線
}演示效果：
實戰體驗六：設計文章標題跨列顯示
再基礎CSS3代碼基礎上補充：
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;
line-height:2.5em;
-webkit-column-rule:dashed 2px gray;
-moz-column-rule:dashed 2px gray;
column-rule:dashed 2px gray;
}
h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;//設置一級標題跨越所有列顯示
}
h2 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all; //設置二級標題跨越所有列顯示
}演示效果：
實戰體驗七：設計不等高的多列布局效果
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;//定義頁面內容顯示爲3列
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;//定義列間距爲3em
line-height:2.5em;
-webkit-column-rule:dashed 2px gray;
-moz-column-rule:dashed 2px gray;
column-rule:dashed 2px gray;//定義列邊框爲2px
-webkit-column-fill:auto;
-moz-column-fill:auto;
column-fill:auto;//設置各列高度自動調整
}
.c1 {
width:100%;
height:500px;
background:red;
}
.c2 {
width:100%;
height:300px;
background:green;
}
.c3 {
width:100%;
height:100px;
background:blue;
}
</style>
<title>column-fill</title>
</head>
<body>
<div class="c1"><img src="images/pic1.jpg" width="100%" height="600" /></div>
<div class="c2"><img src="images/001.gif" width="100%" height="120" /></div>
<div class="c3"><img src="images/img2.jpg" width="100%" height="600" /></div>
</body>
</html>演示效果：
