瀑布流内部元素被强制换行的问题

第一次尝试写瀑布流布局，网上找了很多解决方案，最后决定用 css 来写。

html 代码

<div class="list">
	<ul class="list_group">
		<li class="clear">
			<a href="">
				<img src="images/qr1.png" alt="" class="list_group_img">
				<div class="list_group_name">小亮</div>
				<div class="list_group_age">24岁</div>
				<div class="list_group_salary">5000元/月</div>
			</a>
			<div class="list_group_btns clear">
				<div class="list_group_btns_star already_star">收藏</div>
				<div class="list_group_btns_see">相亲</div>
			</div>
		</li>
	</ul>
</div>

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;

这两句之后，就会正常显示了