css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，讓文字按多列呈現，就像報紙上的新聞排版一樣。
但是在css3的多列布局(columns)語法功能出現之前，人們如果想讓文字呈多列顯示，要麼使用絕對定位，手動給文字分段落，或者使用js指令碼等，而新語法的出現，徹底改變了這樣的局面。
不管想讓一段文字呈多少列顯示，你需要的只是兩個屬性：column-count和column-width。
column-count屬性設定列的具體個數，例如：
style="column-count:2;">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>這將會使文字裡的內容顯示成兩列(首先你的瀏覽器要支援這種新語法，比如火狐瀏覽器、谷歌瀏覽器，ie10+等)：
css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。
column-width屬性控制列的寬度。如果你沒有提供column-count屬性值，那麼，瀏覽器就是自主決定將文字分成合適的列數。
style="column-width:10em;">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>就變成了這樣：
css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。
css3規範對此有詳細的描述。
在乙個多列的文字塊裡，文字內容會自動的一列一列的填充。
大多時候，web程式設計師只需要同時使用這兩個屬中的乙個：column-count或column-width。或者兩個同時使用，幸運的是，這兩個屬性的屬性值是不同單位，不會搞混，所以就有了簡寫方式，columns，例如：
我們之前寫的column-width:12em可以用下面的寫法替換：
style="columns:12em">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。
而之前寫的column-count:4可以用以下語法簡寫替換：
style="columns:4">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float, clear, margin等屬性進行調控，避免了很多麻煩。
而同時宣告了column-width:8em和column-count:12的情況可以用以下簡寫替換：
style="columns:12 8em">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float, clear, margin等屬性進行調控，避免了很多麻煩。
css3規範裡描述的是，各列的高度是均衡的，瀏覽器會自動調整每列裡填充多少文字、均分文字，來使各列的高度保持均衡一致。
然而，有時候，我們需要設定列的最大高度，這個時候，文字內容會從第一列開始填充，然後第二列，第三列，也許以後的列會填不滿，也許會溢位。所以，當對多列布局設定了height或max-height屬性值後，列會伸長到指定高度——無論內容有多少，夠不夠或超不超。
兩列之間會有縫隙間隔。預設情況下這個間隔寬度是1em，但如果你使用column-gap屬性，就會修改這個預設的寬度值：
style="column-width:20em; column-gap:2em;">css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。>css裡一直有乙個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得css裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，css3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。
對於一些不支援多列布局特徵的瀏覽器，比如ie9/ie8，會把這些屬性全部忽略，這樣布局就呈現出傳統的單塊布局。
為了保證瀏覽器最大的相容性，我們在使用多列布局屬性時，最好新增瀏覽器引擎字首，最基本的要加上三種：谷歌瀏覽器的-webkit-，火狐瀏覽器的-moz-，ie瀏覽器的-ms-，最後，別忘了不帶字首的寫法。
css3的多列布局(columns)是一種方便web開發者高效利用寬屏顯示器的非常有用的功能特徵。你會發現在很多地方都需要用到它們，特別是需要自動平衡列高度的地方。
CSS3 多列布局 Columns
為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是...
CSS3多列布局 columns 的用法
css3中新出現的多列布局 multi column 是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列 人們的視點從文字的一端移到另一端 然後換到下一行的行首，如果眼球移動浮動過...
CSS3 多列屬性columns
屬性 簡介columns css3 columns 屬性，是復合屬性，設定或檢索物件的列數和每列的寬度。column width css3 column width 屬性，設定或檢索物件每列的寬度 column count css3 column count 屬性，設定或檢索物件的列數 column...