css3多列布局可以自動將內容按指定的列數排列，它實現了和報紙、雜誌排版非常相似的布局效果。
一、css3多列布局核心屬性：
1、columns：整合column-width和column-count兩個屬性。
2、column-width：定義每列列寬度
3、column-count：定義分列列數
4、column-gap：定義列間距
5、column-rule：定義列邊框
6、column-span：定義多列布局中子元素跨列效果
7、column-fill：控制每列的列高度。
二、瀏覽器相容性，需要加字首。具體使用形式：(以columns屬性為例，其他的屬性使用方式與此相同)
-moz-columns: 9em 4;
-webkit-columns:9em 4;
columns:9em 4;
三、各個屬性介紹：
1、column-width：定義每列列寬度，取值：
（1）auto：預設值，則列寬將由其他屬性來決定，如column-count。且為auto時，只有配合其他屬性一起使用才有效果。
（2）：長度值，不能為負值。
2、column-count：指定列數（可以認為其指定了最大列數，當總寬度不夠時，實現效果的列數可能為小於指定的列數），取值：
（1）auto：預設值，表示元素只有一列，其主要依靠瀏覽器計算自動設定。
（2）：正整數，為大於0的正整數。
3、column-gap：定義列間距，取值為normal（一般相當於1em）和長度值（不能為負值）
4、column-rule：定義列邊框。
（1）它和塊框的border屬性很相似，也接收三個空格分開的值，分別表示寬度、樣式和顏色。例如：、
-moz-column-rule:2px dashed #ccc
-webkit-column-rule:2px dashed #ccc
column-rule:2px dashed #ccc
5、column-span：跨列屬性，用於定義乙個分列元素中的子元素能跨多少列，例如讓乙個標題跨越所有列，取值：
（1）none：預設值，表示不跨越任何列。
（2）all：表示元素跨越所有列，並定位在列的z軸之上。
6、colum-fill：主要用於定義多列中每一列的高度是否統一，取值：
（1）auto：預設值，各列的高度隨其內容的變化而變化。
（2）balance：各列的高度將會根據內容最多的一列的高度進行統一。
CSS3多列布局
最近買了基本書，因為在實習的時候用到很多css動畫，給任務的時候，也會讓布局一些設計頁面。在做的過程中，覺著自己的css功底還是不行，所以就想再多積累多學習。今天主要看的是大漠的 css3 看知乎上和很多人的技術部落格裡都推薦過。今天先說css3的多列布局。平時用到的比較多的是兩欄布局，三欄布局。方...
CSS3多列布局
在本章中，您將學習如下多列屬性 屬性 瀏覽器支援 column count column gap column rule internet explorer 10 和 opera 支援多列屬性。firefox 需要字首 moz chrome 和 safari 需要字首 webkit 注釋 inter...
CSS3多列布局
屬性及版本css3提供了columns多列布局屬性等7個屬性集合，具體如下 columns整合column width和column count兩個屬性 column width定義每列列寬度 column count定義分分列列數 column gap定義列間距 column rule定義列邊框 ...