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;}

新的多列屬性：

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

以上就是CSS3教程-多列的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

