CSS3嚐鮮（一）：CSS多列布局

孟子E章發表於2010-01-18
CSSS3

CSS3規範中的多列布局（或者叫分欄）已經於2009年12月17日被W3C作為預推薦標準（Candidate Recommendation）進行釋出。該模組的在 W3C上的地址為：http://www.w3.org/TR/css3-multicol/。W3C規範定義的實現多列布局的屬性有：

屬性名 可能的值 預設值 應用元素
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto 塊級元素
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto 塊級元素
break-inside auto | avoid | avoid-page | avoid-column auto 塊級元素
column-count | auto auto 非替換的塊級元素
(table元素除外)、
表格單元格、行內塊元素
column-fill auto | balance balance 多列元素
column-gap | normal normal 多列元素
column-rule || || [ | transparent ] 同單個元素 多列元素
column-rule-color color值 多列元素
column-rule-style none 多列元素
column-rule-width medium 多列元素
columns || 同單個元素 非替換的塊級元素
(table元素除外)、
表格單元格、行內塊元素
column-span 1 | all 1 靜態、非浮動元素
column-width | auto auto 非替換的塊級元素
(table元素除外)、
表格單元格、行內塊元素

在我們經常閱讀的報紙中，一般情況下一個版面被分成多個列進行排版，或者在一般的雜誌中，一頁被分成2列排版。在CSS3頒佈之前，在HTML中實現這樣 的功能是非常麻煩的。現在，CSS3規範中對多列布局進行了定義，使用CSS樣式單就可以輕鬆搞定了。支援的瀏覽器目前有：Firefox、 Chrome、Safari等。目前，這些瀏覽器對該標準的支援採取還是擴充套件的方法，也就是採用-moz、-webkit等瀏覽器特有的屬性，但是，這並 不影響對W3C標準的理解。

下面我就舉一個簡單的例子。下面例子中的div1這個元素，採用column-count屬性將div顯示的內容劃分為2列顯示，由於沒有特別設定每列的 寬度，則列的寬度是自動平均分配的。div2這個div，設定列的寬度和列間距，另外還設定列與列之間的分割線的樣式。注意：要檢視div2的效果，則瀏 覽器的視窗要寬一些。
XML/XHTML 程式碼
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --&gt<style. type="text/css">
#div1{
-moz-column-count:2;
-webkit-column-count:2;
}

#div2{
border:6px solid orange;
padding:6px;
text-align:justify;
-moz-column-width:20em;
-moz-column-gap:3em;
-moz-column-rule:6px solid blue;
-webkit-column-width:20em;
-webkit-column-gap:5em;
-webkit-column-rule:6px solid blue;
}
style>
<div id="div1">
當 春風再一次吹拂她的臉龐時，那場讓她刻骨銘心的失戀已在煦風輕揚的季節淡去了。她一點點地恢復，彷彿重生一般，花兒般的笑顏又重新浮上了她的臉龐。而他， 看到她康復的樣子，高興極了，但他卻不會講什麼，依舊如故，默默地陪在她身旁。他愛她，就包括愛她的一切缺點。這樣做，他並不覺得有失尊嚴。他認為既然愛 了，就應該無怨無悔。而她，覺得開始有點喜歡上了他，有些依賴他。但她認為，離愛還很遙遠。<br/>
轉眼她和他都要畢業了，她甚至沒有徵求他的意見，就直接去了北方的一座城市，而他，卻追隨著她也到了這裡。本來，在南方那座城市，他的家人早已給他聯絡好 了一家不錯的公司，但他連想都沒想就拒絕了。她和他分別進了不同的公司。同在一個陌生的城市打工，難免心神俱疲，這個時候，她就很想找一個依靠，給她一點 家的溫暖。明明知道他一直願意做她的依靠，可她卻不願意把自己的一生交付於他，因為她覺得自己一直不愛他，不愛，又如何依靠，再說，他也不能提供給她想像 中的生活。
div>  
<hr/>
<div id="div2">
當春風再一次吹拂她的臉龐時，那場讓她刻骨銘心的失戀已在煦風輕揚的季節淡去了。她一點點地恢復，彷彿重生一般，花兒般的笑顏又重新浮上了她的臉龐。而 他，看到她康復的樣子，高興極了，但他卻不會講什麼，依舊如故，默默地陪在她身旁。他愛她，就包括愛她的一切缺點。這樣做，他並不覺得有失尊嚴。他認為既 然愛了，就應該無怨無悔。而她，覺得開始有點喜歡上了他，有些依賴他。但她認為，離愛還很遙遠。<br/>
轉眼她和他都要畢業了，她甚至沒有徵求他的意見，就直接去了北方的一座城市，而他，卻追隨著她也到了這裡。本來，在南方那座城市，他的家人早已給他聯絡好 了一家不錯的公司，但他連想都沒想就拒絕了。她和他分別進了不同的公司。同在一個陌生的城市打工，難免心神俱疲，這個時候，她就很想找一個依靠，給她一點 家的溫暖。明明知道他一直願意做她的依靠，可她卻不願意把自己的一生交付於他，因為她覺得自己一直不愛他，不愛，又如何依靠，再說，他也不能提供給她想像 中的生活。
div>
如果使用Firefox 3.5、Google Chrome或者Safari4的瀏覽器，就可以看到上面的例子被顯示了多列的佈局。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/15723462/viewspace-625407/，如需轉載，請註明出處，否則將追究法律責任。

相關文章