瀑布流布局使用column-count内容被截断一半上面一半下面

Posted 2023-05-08

参考技术A 问题如图：

解决方法是给排列的内容添加样式:

但是我在写sass时，该样式只能带上 -webkit-才能识别，应该会有兼容性问题吧。

然后在查阅资料是发现另一个样式 page-break-inside，发现该样式也可以解决这个问题

结果如图：

其他浏览器是否兼容还需要验证

瀑布流布局

-webkit-column-width:100%; //列宽 
-moz-column-width:100%;
-o-colum-width:100%;
colum-width:100%;

-webkit-column-count: 2; //列数
-moz-column-count: 2;
-o-column-count: 2;

column-count: 2;

-moz-column-gap:2%; //列间距
-webkit-column-gap:2%;
column-gap:2%;