IT兄弟連 HTML5教程 CSS3屬性特效 CSS3分欄佈局

CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀佈局模式的有力擴充。這種新語法可以讓WEB開發人員輕鬆的讓文本呈現多列顯示。咱們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另外一端、而後換到下一行的行首，若是眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。因此，爲了最大效率的使用大屏幕顯示器，頁面設計中須要限制文本的寬度，讓文本按多列呈現，就像報紙上的新聞排版同樣。可是在CSS3的多列布局(columns)語法功能出現以前，人們若是想讓文本呈多列顯示，要麼使用絕對定位，手動給文本分段落，或者使用JS腳本等，而新語法的出現，完全改變了這樣的局面。

對於一些不支持多列布局特徵的瀏覽器，好比IE9/IE8，會把這些屬性所有忽略，這樣佈局就呈現出傳統的單塊佈局。爲了保證瀏覽器最大的兼容性，咱們在使用多列布局屬性時，最好添加瀏覽器引擎前綴，最基本的要加上三種：谷歌瀏覽器的-webkit-，火狐瀏覽器的-moz-，IE瀏覽器的-ms-，最後，別忘了不帶前綴的寫法。

分欄佈局有三個參數能夠設定，分別爲column-width、column-count、column-gap、column-rule，具體描述如表1：

表1  CSS3分欄佈局參數說明

 

   

 

1  列個數和列寬度

無論想讓一段文本呈多少列顯示，你須要的只是兩個屬性：column-count和 column-width。

（1）使用column-count爲某個文章設置兩列，代碼以下：

 

這將會使文本里的內容顯示成兩列(首先你的瀏覽器要支持這種新語法，好比火狐瀏覽器、谷歌瀏覽器，IE10+等)，在這裏咱們使用了column-count兼容瀏覽器，使用瀏覽器打開這個html文件，效果如圖1所示：

圖1  column-count分欄佈局

 

（2）column-width屬性控制列的寬度。若是你沒有提供column-count屬性值，那麼，瀏覽器就是自主決定將文本分紅合適的列數。將上例的CSS代碼替換以下：

 

這將會使文本里的內容被分紅若干列，每列的寬度爲10em，分欄效果如圖2所示：

圖2  column-width分欄佈局

 

2  列之間的縫隙間隔寬度

兩列之間會有縫隙間隔。缺省狀況下這個間隔寬度是1em，但若是你使用column-gap屬性，就會修改這個缺省的寬度值，將上例的分欄寬度爲20em，分欄間隔爲2em。將上例的CSS代碼替換以下：

 

這將會使文本里的內容被分紅若干列，每列的寬度爲20em，分隔間隔爲2em，效果如圖3所示：

圖3  column-gap分欄間隔

 

3  分欄間隔符

column-rule的語法以下：

column-rule: column-rule-width column-rule-style column-rule-color;

column-rule屬性是一個簡寫屬性，用於設置全部column-rule-* 屬性。它們的參數及描述如表2：

表2  column-rule參數取值及描述

 

 

其中，column-rule-style有如下可選值，它們的取值及描述如表3：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

表3  column-rule-style參數取值及描述

 

 

下面，咱們將把文本分爲三欄，並給出2em的縫隙間隔，每欄間隔都給一個黑色的虛線間隔符。CSS代碼以下：

 

這將會使文本里的內容被分三列，分隔間隔爲2em，分隔符爲黑色虛線，效果如圖4所示：

圖4 column-rule分欄符

 

CSS3的多列布局(columns)是一種方便WEB開發者高效利用寬屏顯示器的很是有用的功能特徵。你會發如今不少地方都須要用到它們，特別是須要自動平衡列高度的地方。