css 瀑布流布局:
html:
<html>
<style type="text/css">
.mainBox {
width: 100%;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.sonBox {
/* margin-bottom: 20px; */
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
color: #fff;
background: #1890FF;
width:100%;
margin:0 0 12px 0;
}
</style>
<body>
<div class="mainBox">
<div class="sonBox">
内容1
<br />
内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1
</div>
<div class="sonBox">
内容2
<br />
内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2
</div>
<div class="sonBox">
内容3
<br />
内容3 内容3 内容3 内容3 内容3 内容3 内容3
</div>
</div>
</body>
</html>