子容器不等高，多行兩列排版
父容器上添加樣式
column-count: 2;
-webkit-column-count: 2;
循環的子容器添加樣式
height: auto;
-webkit-column-break-inside: avoid;
css3這個東東真神奇，寫了好多種佈局都實現不了，最終完美呈現如下：
多列布局詳解
-
設置對象的列數和每列的寬度。複合屬性。
-
設置對象的寬度；使用像素表示。auto：根據 <’ column-count '> 自定分配寬度
-
column-count： | auto 用來定義對象中的列數，使用數字 1-10表示。
auto：根據 <’ column-width '> 自定分配寬度 -
column-gap: normal || length， normal是默認值，爲1em， length 是用來設置列與列之間的間距。
-
column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '>
設置對象的列與列之間的邊框。複合屬性 -
column-fill：auto | balance
設置對象所有列的高度是否統一;
auto： 列高度自適應內容;
balance： 所有列的高度以其中最高的一列統一 -
column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設置對象之前是否斷行;
auto： 既不強迫也不禁止在元素之前斷行併產生新列;
always： 總是在元素之前斷行併產生新列
avoid：避免在元素之前斷行併產生新列 -
column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設置對象之後是否斷行 -
column-break-inside：auto | avoid | avoid-page | avoid-column
設置對象內部是否斷行;
auto：既不強迫也不禁止在元素內部斷行併產生新列;
avoid：避免在元素內部斷行併產生新列
column-span: none（默認值）|| all，none是不跨越任何列。all 是元素跨越所有列，並定位在列的Z軸之上。