太長的文字行十分不容易閱讀，css多列布局就是允許簡單地定義多列文字。
有兩個css屬性控制是否實現多列布局和顯示多少列： column-count 和column-width。
這兩個屬性可以同時使用，也可以只使用其中乙個。
如果同時設定了以上二者，那麼column-count值就被當做欄目的最大值。
比如，對於250px的容器，如果設定column-width為100px，column-count為3，那麼瀏覽器會生成2欄而不是3欄。
在多列塊中，內容會自動從一列換到另一列中。
columns屬性是以上兩個屬性的簡寫屬性。
columns
: 1em;
/*column-width列的長度值*/
columns
: 1;
/*column-count列數*/
columns
: auto;
columns
: 1 auto;
columns
: auto 12em;
columns
: auto auto;
然而，一些情況下，明確設定最大列高也是有用的，這樣內容從第一列開始，盡可能多的生成列，甚至會溢位右邊沿。
因此，如果通過設定height 或 max-height 屬性來限制列高，在生成新的一列之前每一列都會僅允許增加到這個高度。該模型對布局來說也更高效。
列之間有縫隙。該值可通過設定多列模組的 column-gap 屬性來修改。
如果沒有設定column-gap值，則每個瀏覽器分別為其指定預設值。
一般最好使用em單位的長度，這樣空隙能夠隨著文字大小的變化而變化。
用於給間隔增加豎線樣式實現視覺分隔。
也是乙個簡寫屬性，包含以下三個屬性：
其實多欄布局是一項典型的漸進增強技術，多列屬性會被不支援多列模型的瀏覽器忽略。因此，為這些瀏覽器建立單列結構而為支援多列的瀏覽器建立多列結構相對來說比較簡單。
CSS3 多列布局 Columns
為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是...
CSS3 多列屬性columns
屬性 簡介columns css3 columns 屬性，是復合屬性，設定或檢索物件的列數和每列的寬度。column width css3 column width 屬性，設定或檢索物件每列的寬度 column count css3 column count 屬性，設定或檢索物件的列數 column...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...