记录【column-count】属性 多列布局使用方法

92 阅读1分钟

基础用法

column-count:2;
column-gap:100px;

表示分为两列显示 每列间隔100像素

column-count多列模式下webkit内核分页阻断使用-webkit-column-break-before: always;即可正常阻断

火狐浏览器无效

火狐方法

break-inside: avoid

可在火狐浏览器和谷歌浏览器正常阻断分页

如果标签不在column-count属性的直接子元素下面 需要给元素添加column-count:1;即可正常使用