效果是为了有这么块 两列 瀑布流布局
css
multi-column实现 瀑布流主要依赖以下几个属性:
column-count: 设置共有几列
column-width: 设置每列宽度,列数由 总宽度与 每列宽度计算得出
column-gap: 设置列与列之间的间距
break-inside: auto | avoid
auto: 元素可以中断
avoid: 元素不能中断
<div style="width: 1000px;background-color: antiquewhite;column-count:2">
<div style="break-inside:avoid;background-color: aqua; height: 20px;"></div>
<div style="break-inside:avoid;background-color: rgb(0, 123, 255); height: 80px;"></div>
<div style="break-inside:avoid;background-color: rgb(102, 255, 0); height: 40px;"></div>
<div style="break-inside:avoid;background-color: rgb(255, 0, 123); height: 50px;"></div>
<div style="break-inside:avoid;background-color: rgb(255, 47, 0); height: 60px;"></div>
<div style="break-inside:avoid;background-color: rgb(191, 255, 0); height: 70px;"></div>
<div style="break-inside:avoid;background-color: rgb(136, 0, 255); height: 80px;"></div>
<div style="break-inside:avoid;background-color: rgb(255, 208, 0); height: 90px;"></div>
<div style="break-inside:avoid;background-color: rgb(255, 98, 0); height: 100px;"></div>
<div style="break-inside:avoid;background-color: rgb(179, 0, 255); height: 90px;"></div>
<div style="break-inside:avoid;background-color: rgb(255, 0, 149); height: 80px;"></div>
</div>