CSS3 可以將文本內容設計成像報紙一樣的多列布局。像下面這樣：
這樣的布局稱為“多列布局”。
對多列屬性分別進行學習：
對於 column 的所有屬性，ie10+ 支持，firefox 不支持 column-span。除 firefox 外，所有瀏覽器都不支持 column-fill 屬性。
1. column-count: 需要分割的列數
<div> 記得早先少年時，大家誠誠懇懇，說一句是一句；清早上火車站，長街黑暗無行人，賣豆漿的小店冒着熱氣；從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一個人；從前的鎖也好看，鑰匙精美有樣子，你鎖了人家就懂了。 </div>
div { -moz-column-count: 3; column-count: 3; }
通過測試，firefox(version 49.0.1) 需要添加 -moz- 前綴，chrome，opera，safari，不需要添加 -webkit- 前綴也能正常顯示，ie10+，edge 不需要添加前綴能正常顯示。將頁面縮小后(不縮小時由於文本字數不夠，只顯示兩列)顯示效果：
2. column-gap: 列與列間的間隙
ie下默認為 16px，其它瀏覽器未明確給出。
<div> 當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發現我不能夠改變我們的國家，我的最后願望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界。 </div>
div { -moz-column-count: 4; column-count: 4; -moz-column-gap: 40px; column-gap: 40px; }
3. column-rule-width: 列與列間的邊框寬度
4. column-rule-style: 列與列間的邊框樣式
5. column-rule-color: 列與列間的邊框顏色
以上三個屬性可以簡寫為 column-rule。同 border 一樣，這三個屬性里 width 和 color 可以省略其中之一或都省略，瀏覽器會使用默認的 width 和 color，但是 style 不能省略。在谷歌瀏覽器中做測試：
(1). 省略 width(chrome 默認為 3px, 其它瀏覽器未明確給出)
<div> 這么多年咨詢信看下來，讓我逐漸明白了一件事。很多時候，咨詢者心里已經有了答案，來咨詢只是想確認自己的確定是對的。所以有些人讀過回信后，會再次來信，大概就是因為回答的內容和他們的想法不一樣吧。 </div>
div { -moz-column-count: 4; column-count: 4; -moz-column-gap: 40px; column-gap: 40px; -moz-column-rule-style: solid; column-rule-style: solid; -moz-column-rule-color: #f00; column-rule-color: #f00; }
(2). 省略 color(默認為 rbg(0,0,0))
div { -moz-column-count: 4; column-count: 4; -moz-column-gap: 40px; column-gap: 40px; -moz-column-rule-width: 2px; column-rule-width: 2px; -moz-column-rule-style: solid; column-rule-style: solid; }
(3). width 和 color 兩者都省略
div { -moz-column-count: 4; column-count: 4; -moz-column-gap: 40px; column-gap: 40px; -moz-column-rule-style: dotted; column-rule-style: dotted; }
6. column-span: 元素跨越列數(firefox 不支持)
可用值為 1 和 all，默認值為 1。火狐瀏覽器不支持此屬性，但是當使用此屬性值時，變現效果和 column-span: 1; 一樣，因此可以放心的使用 column-span: 1; 不建議使用 column-span: all;
<div> <h2>在情感的問題上，很多人都是傻瓜</h2> 他在感情上的愚鈍就像是門窗緊閉的屋子，雖然愛情的腳步正在緩緩向他走來，可他還是在屋子里走過去又走過來，他也聽到了，可是他覺得那是幻想，是有人走錯了方向，她終究會明白過來，然后找對自己的方向繼續過自己該有的生活。然而聯系着美好愛情的生活不單單這么簡單，否則戀愛就沒有那么美好，那么令人向往了。他喜歡的是另外一個女孩，可是他僅僅向前邁了一小步，最終在院子里徘徊，他覺得女孩走的是另外一條路，她邁着不一樣的步伐，很清晰自己的目標和價值所在，走得很快。當然他不止一次的做夢醒來希望女孩旁邊給他留了一條路，這樣他們就能攜手並進，在讓大家都變得更好的路上越走越遠，這是他最美好的期待。他依然在這件事情糾結着，直到女孩說：“傾盡所有，你會得到你想要的！” </div>
div { -moz-column-count: 4; column-count: 4; } h2 { column-span: 1; }
與其他屬性不同，column-span 是用在子元素上，表示跨越多少列，好像表格中 col-span 屬性一樣。因為用的值是 1，而不是 all，所以 firefox 瀏覽器中的顯示效果和其它瀏覽器一樣。
7. column-width: 列的寬度
<div>我以前常常想：“朋友有很多，能成為朋友，必定是在生活習慣、愛好、脾氣、秉性、追求、對事物的看法、處事風格等一件事或多方面有共同點或相似之處，何其難得。可碰到自己每當安靜下來就想起的人，每當自己有空閑時就迫不及待想要去了解的人可遇而不可求。能在人海中相識並願意花時間想去走進一個人內心這樣的人，更應該努力去爭取。朋友失去了一個，你還有很多，可是你失去喜歡的人，就是你的大過！”</div>
div { -moz-column-count: 4; column-count: 4; -moz-column-width: 200px; column-width: 200px; }
這個屬性要求比較多：列數與寬度的乘積(column-count * column-width)應該要小於頁面的寬度，才能展示想要的四列效果。當文本字數比較少，頁面又比較寬時，就顯示不了四列，可能只有三列或更少。
8. column-fill: 如何填充列
這個屬性目前只有 firefox 支持，fill 翻譯為填充，所以 column-fill 是指定填充列的方式。有兩個值可用，balance，列長短平衡，瀏覽器應盡量減少改變列的長度。auto，列順序填充，他們將有不同的長度。
9. columns: 指定列的寬度和數量
這是一個合寫屬性，是 column-width 和 column-count 的合寫。
<div>后來他在“我”的生活里悄然離去之后，“我”常常會心酸地想起這個夏天早晨站台上的情景，“我”在他二十一歲的時候突然闖進他的生活，而且完全擠滿他的生活，他本來應有的幸福一點也擠不進來了。當他含辛茹苦把“我”養育成人，“我”卻不知不覺把他拋棄在站台上。人世間的親情像一杯咖啡，通過收養來建立的親情是一杯苦咖啡，打算喝咖啡的人走了，他知道有更好的咖啡等着他，后來這杯咖啡越來越苦。但我相信喝咖啡的人終究會回來的。</div>
div { -moz-columns: 150px 4; columns: 150px 4; }
這個合寫的屬性不是都滿足 width 和 count。針對本例我們撇開每一列之間的間距不談，假設每一列之間的間距為 0。那么當文本的寬度不小於 600px 時，文本將始終顯示 4 列(至少確實想顯示 4 列，如果文本字數足夠的話就一定顯示 4 列)，就不能同時滿足於寬度也為 150px；當文本的寬度小於 600px 時，文本就顯示為 3 列，當文本寬度小於 300px 時，文本就顯示為 2 列。
本例中，對於元素可用寬度不同顯示的列數也不同。
顯示為 4 列：
顯示為 3 列：
顯示為 2 列：
顯示為 1 列：
總結：那么這個合寫屬性就可以理解為(還是假設每列之間的間距為 0)：當元素可用寬度很小時，它只顯示 1 列；當元素的可用寬度不小於 count * 2 它就顯示 2 列；當元素的可用寬度不小於 count * 3 時，它就顯示 3 列；依此規則類推，至到元素的可用寬度不小於 count * width 時，就顯示為 width 列。
一些猜想：
在元素可用寬度確定的情況下，既設置 column-width， 又設置了 column-count 和 coiumn-gap 時，頁面該怎么布局呢？
經過測試，基本可以得出以下結論：
1. 第九點中的總結在這里依然有效；
2. 當元素的寬度能夠排下兩列及以上時(一列時，沒有間距)，column-gap 間距能始終被滿足。
更新(2019年3月28日)：
這里的 columns 屬性時 column-count 和 column-width 屬性的簡寫形式。
如果只設置 column-count 屬性，瀏覽器會嚴格生成指定數量的欄，不管寬度如何。
如果同時設置了 column-count 和 column-width，前者會作為最大欄數，后者會作為最小欄寬。
columns: 20em; /* 在保證最小寬度 20em 的前提下，自動設置欄數 */ column-width: 20em; /* 同上 */ columns: 3; /* 3 欄，自動設置寬度 */ column-count: 3; /* 同上 */ columns: 3 20em; /* 至多 3 欄，每欄寬度至少 20em */
更新(2019年7月29日)：
足足過去了一個月，才發現這篇博客有人評論了，寫了有三年多了，沒想到有人還看得這么認真。本想回復，結果發生了錯誤，需要反饋到 cnblogs 郵箱去處理。很感謝 o!_o! （博客地址：https://home.cnblogs.com/u/sarilar/）指出的錯誤。明顯錯誤的地方我會在原文中直接修改，之前自己沒理解寫出的，我直接將他的評論內容粘出來，經過驗證了，他的觀點是對的。
第二點中的column-gap的默認值是normal，且在大小上等於1em。
第三點中的column-rule各個參數的默認值：0px none rgb(0,0,0)。這里面重要的3點是：
column-rule-style:none；使column-rule-width:0px；
colulmn-rule-style非none時默認column-rule-width:3px；
column-rule-color默認是color屬性的值，而color屬性默認是黑色，所以才是rgb(0,0,0)。
第六點中已經指出火狐不支持column-span屬性，然示例代碼中還是用了-moz-column-span這個屬性，是矛盾。
第九點中對columns屬性的總結沒有說明出本質，應這樣理解：column-width並不完全意味一列的寬度，一列的寬度事實上是由column-count決定的。因為對象會按指定的column-count減去（column-count - 1）*column-gap寬度的所有列間距后將剩余寬度"column-count等分"。column-width的作用是當它大於一列的寬度時使對象“降列顯示”。降列顯示即是對象會顯示比原先少一的列數。舉例如下：
假設對象width:700px;font-size:14px;column-count:4;
每一列寬度w1=[700-(4-1)*14]/4=164.5px，
當column-width<=w1時按指定的4列顯示，否則降列顯示，首次降列column-count減為3，column-gap數量減為2，重新計算每一列寬度w2=[700-(3-1)*14]/3=224px，
當column-width<=w2使按新的3列顯示，否則再次降列顯示
。
。
。
以此類推。