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

第一次尝试写瀑布流布局，网上找了很多解决方案，最后决定用 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;

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