利用column多列屬性調(diào)整頁(yè)面文字列布局
column多列屬性
column-count:欄目數(shù)
兼容性寫法:
- -webkit-column-count:3
- -moz-column-count:3
column-width 屬性規(guī)定列的寬度。
column-gap屬性規(guī)定列之間的間隔
column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。
CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁(yè)中塊狀布局模式的有力擴(kuò)充。這種新語(yǔ)法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。我們知道,當(dāng)一行文字太長(zhǎng)時(shí),讀者讀起來(lái)就比較費(fèi)勁,有可能讀錯(cuò)行或讀串行;人們的視點(diǎn)從文本的一端移到另一端、然后換到下一行的行首,如果眼球移動(dòng)浮動(dòng)過大,他們的注意力就會(huì)減退,容易讀不下去。所以,為了最大效率的使用大屏幕顯示器,頁(yè)面設(shè)計(jì)中需要限制文本的寬度,讓文本按多列呈現(xiàn),就像報(bào)紙上的新聞排版一樣。
但是在CSS3的多列布局(columns)語(yǔ)法功能出現(xiàn)之前,人們?nèi)绻胱屛谋境识嗔酗@示,要么使用絕對(duì)定位,手動(dòng)給文本分段落,或者使用JS腳本等,而新語(yǔ)法的出現(xiàn),徹底改變了這樣的局面。
多列(columns)的用法
列個(gè)數(shù) 和 列寬度
不管想讓一段文本呈多少列顯示,你需要的只是兩個(gè)屬性:column-count 和 column-width。
column-count 屬性設(shè)置列的具體個(gè)數(shù),例如:
<div style="column-count:2;">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>
這將會(huì)使文本里的內(nèi)容顯示成兩列(首先你的瀏覽器要支持這種新語(yǔ)法,比如火狐瀏覽器、谷歌瀏覽器,IE10+等):
column-width屬性控制列的寬度。如果你沒有提供column-count屬性值,那么,瀏覽器就是自主決定將文本分成合適的列數(shù)。
<div style="column-width:10em;">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>
就變成了這樣:
在一個(gè)多列的文本塊里,文本內(nèi)容會(huì)自動(dòng)的一列一列的填充。
多列布局columns語(yǔ)法簡(jiǎn)寫
大多時(shí)候,WEB程序員只需要同時(shí)使用這兩個(gè)屬中的一個(gè):column-count 或 column-width。或者兩個(gè)同時(shí)使用,幸運(yùn)的是,這兩個(gè)屬性的屬性值是不同單位,不會(huì)搞混,所以就有了簡(jiǎn)寫方式,columns,例如:
我們之前寫的 column-width:12em 可以用下面的寫法替換:
<div style="columns:12em">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>。
而之前寫的 column-count:4 可以用以下語(yǔ)法簡(jiǎn)寫替換:
<div style="columns:4">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>
而同時(shí)聲明了 column-width:8em 和 column-count:12 的情況可以用以下簡(jiǎn)寫替換:
<div style="columns:12 8em">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>
列高度的平衡
CSS3規(guī)范里描述的是,各列的高度是均衡的,瀏覽器會(huì)自動(dòng)調(diào)整每列里填充多少文本、均分文本,來(lái)使各列的高度保持均衡一致。
然而,有時(shí)候,我們需要設(shè)定列的最大高度,這個(gè)時(shí)候,文本內(nèi)容會(huì)從第一列開始填充,然后第二列,第三列,也許以后的列會(huì)填不滿,也許會(huì)溢出。所以,當(dāng)對(duì)多列布局設(shè)定了height或max-height屬性值后,列會(huì)伸長(zhǎng)到指定高度——無(wú)論內(nèi)容有多少,夠不夠或超不超。
列之間的縫隙間隔寬度
兩列之間會(huì)有縫隙間隔。缺省情況下這個(gè)間隔寬度是1em,但如果你使用column-gap屬性,就會(huì)修改這個(gè)缺省的寬度值:
<div style="column-width:20em; column-gap:2em;">CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局。幸運(yùn)的是,CSS3里提供了一批新的創(chuàng)建列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控,避免了很多麻煩。</div>

列布局的瀏覽器完美兼容
對(duì)于一些不支持多列布局特征的瀏覽器,比如IE9/IE8,會(huì)把這些屬性全部忽略,這樣布局就呈現(xiàn)出傳統(tǒng)的單塊布局。
為了保證瀏覽器最大的兼容性,我們?cè)谑褂枚嗔胁季謱傩詴r(shí),最好添加瀏覽器引擎前綴,最基本的要加上三種:谷歌瀏覽器的-webkit-,火狐瀏覽器的-moz-,IE瀏覽器的-ms-,最后,別忘了不帶前綴的寫法。
總結(jié)
CSS3的多列布局(columns)是一種方便WEB開發(fā)者高效利用寬屏顯示器的非常有用的功能特征。你會(huì)發(fā)現(xiàn)在很多地方都需要用到它們,特別是需要自動(dòng)平衡列高度的地方。
相關(guān)文章
基于CSS3的CSS 多欄(Multi-column)實(shí)現(xiàn)瀑布流源碼分享
瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁(yè)面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁(yè)面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。我們只2014-06-11- CSS里一直有一個(gè)讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局2014-05-03

