CSS3多列布局

2021-09-07 16:24:14 字數 1001 閱讀 3371

在本章中,您將學習如下多列屬性: 屬性

瀏覽器支援

column-count

column-gap

column-rule

internet explorer 10 和 opera 支援多列屬性。

firefox 需要字首 -moz-。

chrome 和 safari 需要字首 -webkit-。

注釋:internet explorer 9 以及更早的版本不支援多列屬性。

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

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

div

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

規定列之間 40 畫素的間隔:

div

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

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

div

下面的**列出了所有的轉換屬性:

屬性描述

csscolumn-count

規定元素應該被分隔的列數。

3column-fill

規定如何填充列。

3column-gap

規定列之間的間隔。

3column-rule

設定所有 column-rule-* 屬性的簡寫屬性。

3column-rule-color

規定列之間規則的顏色。

3column-rule-style

規定列之間規則的樣式。

3column-rule-width

規定列之間規則的寬度。

3column-span

規定元素應該橫跨的列數。

3column-width

規定列的寬度。

3columns

規定設定 column-width 和 column-count 的簡寫屬性。

CSS3多列布局

最近買了基本書,因為在實習的時候用到很多css動畫,給任務的時候,也會讓布局一些設計頁面。在做的過程中,覺著自己的css功底還是不行,所以就想再多積累多學習。今天主要看的是大漠的 css3 看知乎上和很多人的技術部落格裡都推薦過。今天先說css3的多列布局。平時用到的比較多的是兩欄布局,三欄布局。方...

CSS3多列布局

css3多列布局可以自動將內容按指定的列數排列,它實現了和報紙 雜誌排版非常相似的布局效果。一 css3多列布局核心屬性 1 columns 整合column width和column count兩個屬性。2 column width 定義每列列寬度 3 column count 定義分列列數 4 ...

CSS3多列布局

屬性及版本css3提供了columns多列布局屬性等7個屬性集合,具體如下 columns整合column width和column count兩個屬性 column width定義每列列寬度 column count定義分分列列數 column gap定義列間距 column rule定義列邊框 ...