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開發者高效利用寬屏顯示器的非常有用的功能特徵。你會發現在很多地方都需要用到它們，特別是需要自動平衡列高度的地方。