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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想要一个适用于任何数量和不同大小的盒子的解决方案，Masonry（一个JavaScript解决方案）可能就是您要找的。

Answer 3

我认为http://masonry.desandro.com/可以为您提供帮助。 它的工作原理是根据可用的垂直空间将元素放置在最佳位置