CSS3教學-多列

Hello！小夥伴們，我們上一篇文章的CSS3教學-動畫知識大家有沒有消化完呢？ CSS3中新出現的多列版面(multi-column)是傳統HTML網頁中塊狀版面模式的強大擴充。這種新語法能夠讓WEB前端開發人員輕鬆的讓文字呈現多列顯示。

CSS3 多列：

透過 CSS3，您能夠建立多個列來對文字進行佈局 – 就像報紙一樣！

在本章中，您將學習如下多列屬性：

1、column-count；

2、column-gap；

3、column-rule。

瀏覽器支援：

Internet Explorer 10 和 Opera 支援多列屬性。

Firefox 需要前綴 -moz-。

Chrome 和 Safari 需要前綴 -webkit-。

註解：Internet Explorer 9 以及更早的版本不支援多列屬性。

CSS3 建立多列：

column-count 屬性規定元素應該被分隔的列數：

實例：

把div 元素中的文字分隔為三列：

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

CSS3 規定列之間的間隔：

column-gap 屬性規定列之間的間隔：

實例：

規定列之間40 像素的間隔：

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

CSS3 列規則：

column-rule 屬性設定列之間的寬度、樣式和樣式顏色規則。

實例：

規定列之間的寬度、樣式和顏色規則：

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

新的多列屬性：

下面的表格列出了所有的轉換屬性：

多列的內容，更多相關內容請關注PHP中文網（www.php.cn）！