好程式員web前端教育訓練分享之HTMLCSS學習筆記css3-多列,多列布局類似報紙或雜志中的排版方式,主要用以控制大篇幅文本。
多列屬性
1、column-count
屬性規定元素應該被分隔的列數
适用于:除table外的非替換塊級元素, table cells, inline-block元素
2、column-gap
屬性規定列之間的間隔大小
3、column-rule
設定或檢索對象的列與列之間的邊框。複合屬性。
column-rule-color規定列之間規則的顔色。
column-rule-style規定列之間規則的樣式。
column-rule-width規定列之間規則的寬度。
4、column-fill
設定或檢索對象所有列的高度是否統一
auto:列高度自适應内容
balance:所有列的高度以其中最高的一列統一
5、column-span
設定或檢索對象元素是否橫跨所有列。
none:不跨列
all:橫跨所有列
6、column-width
設定或檢索對象每列的寬度
7、columns
設定或檢索對象的列數和每列的寬度。複合屬性
<' column-width '> || <' column-count '>
注:Internet Explorer 10 和 Opera 支援多列屬性。 Firefox 需要字首 -moz-。 Chrome 和 Safari 需要字首 -webkit-。