IT兄弟連 HTML5教程 CSS3屬性特效 CSS3分欄布局
- 2019 年 11 月 26 日
- 筆記
版權聲明:本文為部落客原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
本文鏈接:https://blog.csdn.net/ITXDL123/article/details/103155414

CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀布局模式的有力擴充。這種新語法能夠讓WEB開發人員輕鬆的讓文本呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀串列;人們的視點從文本的一端移到另一端、然後換到下一行的行首,如果眼球移動浮動過大,他們的注意力就會減退,容易讀不下去。所以,為了最大效率的使用大螢幕顯示器,頁面設計中需要限制文本的寬度,讓文本按多列呈現,就像報紙上的新聞排版一樣。但是在CSS3的多列布局(columns)語法功能出現之前,人們如果想讓文本呈多列顯示,要麼使用絕對定位,手動給文本分段落,或者使用JS腳本等,而新語法的出現,徹底改變了這樣的局面。
對於一些不支援多列布局特徵的瀏覽器,比如IE9/IE8,會把這些屬性全部忽略,這樣布局就呈現出傳統的單塊布局。為了保證瀏覽器最大的兼容性,我們在使用多列布局屬性時,最好添加瀏覽器引擎前綴,最基本的要加上三種:Google瀏覽器的-webkit-,火狐瀏覽器的-moz-,IE瀏覽器的-ms-,最後,別忘了不帶前綴的寫法。
分欄布局有三個參數可以設定,分別為column-width、column-count、column-gap、column-rule,具體描述如表1:
表1 CSS3分欄布局參數說明

1 列個數和列寬度
不管想讓一段文本呈多少列顯示,你需要的只是兩個屬性:column-count和 column-width。
(1)使用column-count為某個文章設置兩列,程式碼如下:

這將會使文本里的內容顯示成兩列(首先你的瀏覽器要支援這種新語法,比如火狐瀏覽器、Google瀏覽器,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開發者高效利用寬屏顯示器的非常有用的功能特徵。你會發現在很多地方都需要用到它們,特別是需要自動平衡列高度的地方。