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;
}
<div class="box-wrapper">
    <div style="margin-top:0px" class="box"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
</div>

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

猜你喜欢

转载自blog.csdn.net/qq_42306443/article/details/106381278