css - 如何用div填充空白

Question

如何用div填充空白？

我需要 div 的行为就像它们各自填充空白的地方一样。因此，如果需要，div 会到达顶部，加入上面的 div，但无论我在哪里使用 float: left 或 display: inline-block/inline，我都会得到这个>

main {
  font-size: 0;
}
main > div {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
main > div:nth-child(4n+1) {
  height: 200px;
  background: red;
}
main > div:nth-child(4n+2) {
  height: 100px;
  background: blue;
}
main > div:nth-child(4n+3) {
  height: 300px;
  background: orange;
}
main > div:nth-child(4n+4) {
  height: 150px;
  background: darkcyan;
}

<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
</main>

Answer 1

为了实现该布局，您需要使用一些 javascript 逻辑。
单独使用 CSS 不允许您像那样定位不同高度的元素。

一个建议是 masonry它将为您完成起重工作，并为您的元素计算适当的位置，然后应用 position: absolute; 并设置 top 和 left 它们的 css 属性。

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.