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和{{1} } css属性。

Masonry是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头。你可能已经在互联网上看到过它。

如何用div填充空白区域

1 个答案: