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

问题如图：

image.png

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

.sub-classify{
   -webkit-column-break-inside: avoid;
  //auto：既不强迫也不禁止在元素内部断行并产生新列
  //avoid：避免在元素内部断行并产生新列
}

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

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

.sub-classify{
  page-break-inside:avoid;
  //该css样式的意思是：设置在表格元素内部避免进行分页的分页行为
}

结果如图：

image.png

暂时两种css在chrome流量拿起上都能使用

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