多列屬性

多列布局類似報紙或雜志中的排版方式，主要用以控制大篇幅文本。

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 : 設置或檢索對象每列的寬度

說明：當column-width 和column-count 同時存在的時候；

column-width ：最小寬度

column-count ：最多列數

7、復合式寫法：

columns

column-width 和 column-count

columns：200px 5;

注：

Internet Explorer 10 和 Opera 支持多列屬性。

Firefox 需要前綴 -moz-。

Chrome 和 Safari 需要前綴 -webkit-。

8、break-inside CSS 屬性描述了在多列布局頁面下的內容盒子如何中斷,如果多列布局沒有內容盒子,這個屬性會被忽略。

auto：既不強迫也不禁止在元素內部斷行并產生新列

avoid：避免在元素內部斷行并產生新列

多列案例（瀑布流）

總結

以上是生活随笔為你收集整理的添加列属性_css多列属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。