本文介绍了如何使用CSS3的columns属性来创建一个类似淘宝京东首页的商品列表排版，实现多行两列且子容器不等高的布局效果。通过设置column-count、column-gap、column-rule等属性，可以自定义列数、列宽、间距和边框，同时调整column-fill以确保高度平衡。此外，还涉及到了column-break-*属性用于控制元素间的断行行为。
子容器不等高，多行两列排版
父容器上添加样式
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
最低0.47元/天 解锁文章
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
