column实现瀑布流布局 发表于 2018-05-30 一、属性 column-count: 最理想的分栏数目 column-gap: 栏目之间的水平间隙 column-rule: 分割线,形式规则什么的等同于border break-inside: 内容盒子如何中断 12345678910111213141516171819202122/*瀑布流层*/.waterfall { column-count: 4; column-gap: 1em;}/*一个内容层*/.item { padding: 1em; margin: 0 0 1em 0; break-inside: avoid; border: 1px solid #000;}.item img { width: 100%; margin-bottom: 10px;} 123456<div class="waterfall"> <div class="item"> <img src="https://imgsa.jpg"> <p>1 convallis timestamp</p> </div></div>