CSS 浮动不同大小 div

Question

我有一个 div 2 的小问题，它不会低于 div 1（见下图）。我将继续这个（更多 div 继续进行），因此我不想拆分成更小的 div。任何帮助将不胜感激。

.large,
.small,
.long-down {
  float: left;
  margin: 1px;
}
.small {
  width: 100px;
  height: 100px;
  background: gray;
}
.large {
  width: 200px;
  height: 200px;
  background: black;
}

<div class="wrapper">
  <div class="small"></div>
  <div class="small"></div>
  <div class="large"></div>
  <div class="large"></div>
  <div class="large"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="large"></div>
</div>

Answer 1

.large,
.small,
.long-down {
  float: left;
  display: block;
}
.small {
  width: 100px;
  height: 100px;
  background: gray;
  margin-bottom: 1px
}
.large {
  width: 200px;
  height: 200px;
  background: black;
  float: right;
  margin-top: 1px;
}
.wrapper {
  width: 301px;
}
.pull-left {
  width: 100px;
  float: left;
  margin-right: 1px;
}

<div class="wrapper">
  <div class="pull-left">
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="large"></div>
  <div class="large"></div>
</div>

Answer 2

如果您想要一种适用于任意数量和顺序的不同尺寸盒子的解决方案，Masonry（javascript 解决方案）可能就是您要找的。

Answer 3

我认为 http://masonry.desandro.com/ 可以在这方面帮助您。它的工作原理是根据可用的垂直 space

将元素放置在最佳位置

CSS 浮动不同大小 div

CSS float different sized div

html

css

css-float