子容器不等高,多行两列排版
父容器上添加样式
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 '>
设置对象的列与列之间的边框。复合属性 -
colum