第一次尝试写瀑布流布局,网上找了很多解决方案,最后决定用 css 来写。
html 代码
小亮24岁5000元/月收藏相亲
scss 代码
.list_group { column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2; -moz-column-count: 2; column-gap: 1px; -webkit-column-gap: 1px; -o-column-gap: 1px; -ms-column-gap: 1px; -moz-column-gap: 1px; background-color: #f4f4f4; padding-bottom: torem(40px); padding-left: 3%; li { margin: 0; padding: 0; padding-top: 0.3rem; font-size: 0.2rem; line-height: 0.5rem; width: 94%; margin: 0 3% 0 0; border-radius: torem(12px); overflow: hidden; // column-break-inside:avoid; // -webkit-column-break-inside:avoid; a { display: block; } } }
其他内部元素的代码就不贴了,重点是注释的那两句,如果不加的话,就会出现下面的这种情况

加上
column-break-inside:avoid; -webkit-column-break-inside:avoid;
这两句之后,就会正常显示了
