CSS3多列布局 columns 的用法

2022-09-16 16:39:17 字數 3990 閱讀 2868

css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀序列;人們的視點從文字的一端移到另一端、然後換到下一行的行首,如果眼球移動浮動過大,他們的注意力就會減退,容易讀不下去。所以,為了最大效率的使用大螢幕顯示器,頁面設計中需要限制文字的寬度,讓文字按多列呈現,就像報紙上的新聞排版一樣。

但是在css3的多列布局(columns)語法功能出現之前,人們如果想讓文字呈多列顯示,要麼使用絕對定位,手動給文字分段落,或者使用js指令碼等,而新語法的出現,徹底改變了這樣的局面。

不管想讓一段文字呈多少列顯示,你需要的只是兩個屬性:column-countcolumn-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-countcolumn-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:8emcolumn-count:12的情況可以用以下簡寫替換:

style="columns:12 8em">css裡一直有乙個讓我們頭疼的問題,就是建立布局很麻煩。當然,有很多方式,有很多技術都可以建立各種布局,但我們總覺得css裡應該提供一些新屬性,讓我們能更好的管理布局。幸運的是,css3裡提供了一批新的建立列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進行調控,避免了很多麻煩。>

css裡一直有乙個讓我們頭疼的問題,就是建立布局很麻煩。當然,有很多方式,有很多技術都可以建立各種布局,但我們總覺得css裡應該提供一些新屬性,讓我們能更好的管理布局。幸運的是,css3裡提供了一批新的建立列式布局的column屬性,有了這些屬性,我們不需要再使用float, clear, margin等屬性進行調控,避免了很多麻煩。

css3規範裡描述的是,各列的高度是均衡的,瀏覽器會自動調整每列裡填充多少文字、均分文字,來使各列的高度保持均衡一致。

然而,有時候,我們需要設定列的最大高度,這個時候,文字內容會從第一列開始填充,然後第二列,第三列,也許以後的列會填不滿,也許會溢位。所以,當對多列布局設定了heightmax-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...