css3-多列
多列布局類似報(bào)紙或雜志中的排版方式辙纬,主要用以控制大篇幅文本叭喜。
多列屬性
- column-count
屬性規(guī)定元素應(yīng)該被分隔的列數(shù)
適用于:除table外的非替換塊級元素, table cells, inline-block元素
- column-gap
屬性規(guī)定列之間的間隔大小
- column-rule
設(shè)置或檢索對象的列與列之間的邊框捂蕴。復(fù)合屬性啥辨。
column-rule-color規(guī)定列之間規(guī)則的顏色涡匀。
column-rule-style規(guī)定列之間規(guī)則的樣式陨瘩。
column-rule-width規(guī)定列之間規(guī)則的寬度舌劳。
- column-fill
設(shè)置或檢索對象所有列的高度是否統(tǒng)一
auto:列高度自適應(yīng)內(nèi)容
balance:所有列的高度以其中最高的一列統(tǒng)一
- column-span
設(shè)置或檢索對象元素是否橫跨所有列玫荣。
none:不跨列
all:橫跨所有列
- column-width
設(shè)置或檢索對象每列的寬度
- columns
設(shè)置或檢索對象的列數(shù)和每列的寬度捅厂。復(fù)合屬性
<' column-width '> || <' column-count '>
注:Internet Explorer 10 和 Opera 支持多列屬性资柔。 Firefox 需要前綴 -moz-建邓。 Chrome 和 Safari 需要前綴 -webkit-睁枕。
多列案例(瀑布流)
?
?
?
?
本文轉(zhuǎn)自知乎號:千鋒HTML5學(xué)院