在本章中,您將學習如下多列屬性: 屬性
瀏覽器支援
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定義列邊框 ...