起因
使用 column-count
实现瀑布流时,出现内容被分割,大部分都在同一列,但是在一列的最后一个会出现部分内容被分割到了另一列。
.message-box {
column-count: 2;
column-gap: .8rem;
}
.message-list-item {
display: block;
}
第一种方法(推荐)
.message-list-item {
page-break-inside: avoid;
}
原文链接
第二种方法
.message-list-item {
-webkit-column-break-inside: avoid;
}
原文链接
关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式
第三种方法
.message-list-item {
height: 100%;
overflow: auto;
}
原文链接
Reprint please keep the original link: https://zodream.cn/blog/id/239.html