css3多列布布局, 兼容性IE10+, 其他浏览器需要加前缀, 移动端兼容性较好, 不过都只支持部分属性.
下面分享一些自己的经验
column-count 有时会失效
比如父元素下4(偶数)个子元素, column-count为3(奇数), 则很可能只显示两列, 可以设置一下子元素的margin-top/margin-bottom或border, 算是一种hack吧, 至于原因我也说上不来了column-width + column-gap
这两个属性放到一起, 可以作为column-count的代替品, 即不设置column-count的情况下, 也可以实现多列列的顺序
列的顺序是 从上到下, 从左到右的, 而不是 从左到右, 从上到下. 看下面的例子就知道我是啥意思
这个顺序比较反常识, 起码我看得不是很舒服. 因此对顺序有要求时, 使用多列布局时要谨慎column-span
可以实现跨列, 它的值只有none
与all
. 也即它一跨就跨所有的列, 而不能像table一样, 指定只跨几列
在Chrome下, 跨列会打破默认的列的排序, 不过在Firefox却不会, 也即这个表现有因浏览器而异, 不能过分依赖.
下面是codepen里的代码
See the Pen column by levy (@levy9527) on CodePen.
另, 不支持的属性有:
break-inside
break-before
break-after
虽说加了-webkit-column
前缀可以在Chrome55下找到这些属性, 但改变它们的值, 界面并无变化.
还有, 属性column-fill
: [balance | auto ], 也是这样. 不知是否是我测试方法不对.