CSS3之多列布局columns-----类似淘宝京东首页商品列表排版

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42301962/article/details/102391798

子容器不等高，多行两列排版
父容器上添加样式

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

循环的子容器添加样式

height: auto;
-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：避免在元素内部断行并产生新列

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