CSS3之多列布局columns

淘宝京东搜索结果，卡片左右排列，卡片高度随内容自适应。子容器不等高，多行两列排版
父容器上添加样式

    column-count: 2;
    -webkit-column-count: 2;

循环的列表子容器添加样式

height: auto;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;

效果图如下：

 

多列布局详解

参考菜鸟教程：CSS3 多列 | 菜鸟教程

1. 设置对象的列数和每列的宽度。复合属性。

2. 设置对象的宽度；使用像素表示。auto：根据 <’ column-count '> 自定分配宽度

3. column-count： | auto 用来定义对象中的列数，使用数字 1-10表示。
   auto：根据 <’ column-width '> 自定分配宽度

4. column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。

5. column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '>
   设置对象的列与列之间的边框。复合属性

6. column-fill：auto | balance
   设置对象所有列的高度是否统一;
   auto： 列高度自适应内容;
   balance： 所有列的高度以其中最高的一列统一

7. column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
   设置对象之前是否断行;
   auto： 既不强迫也不禁止在元素之前断行并产生新列;
   always： 总是在元素之前断行并产生新列
   avoid：避免在元素之前断行并产生新列

8. column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
   设置对象之后是否断行

9. column-break-inside：auto | avoid | avoid-page | avoid-column
   设置对象内部是否断行;
   auto：既不强迫也不禁止在元素内部断行并产生新列;
   avoid：避免在元素内部断行并产生新列

10. column-span: none（默认值）|| all，none是不跨越任何列。all 是元素跨越所有列，并定位在列的Z轴之上。