css 高度不一的瀑布流

 .box {
	height:123px;
	padding:1em;
	margin-top:1em;
	-moz-page-break-inside:avoid;
	-webkit-column-break-inside:avoid;
	break-inside:avoid;
	border:1px solid #000;
	background:#909090;
}
.spe {
	height:225px;
}
.box-wrapper {
	-moz-column-count:2;
	/* Firefox */
        -webkit-column-count:2;
	/* Safari 和 Chrome */
        column-count:2;
	-moz-column-gap:1em;
	-webkit-column-gap:1em;
	column-gap:1em;
}

注意:margin和padding都会导致顶部或底部多出很多,可以套一层盒子  

你可能感兴趣的:(css 高度不一的瀑布流)