需要 div 排列如截图所示

Question

我正在开发一个 chrome 扩展。有 n 个 div 块。这 n 个 div 块取决于我要访问的 URL。因此，在某些页面上，可见块可能是 1、2、3、4、5，但在另一个页面上，它们可能是 1、5 或 1、2、5。 所以相应地我的div's 应该占据空间并且不要留下任何空白空间。

我需要的输出：

这是我尝试过的（也在jsfiddle），但问题是红色下方的空白区域。

div {
  float: left;
  width: 200px;
}
.One {
  background-color: Red;
  height: 200px;
}
.Two {
  background-color: Green;
  height: 400px;
}
.Three {
  background-color: Blue;
  height: 500px;
}
.Four {
  background-color: Orange;
  height: 700px;
}
.Five {
  background-color: Yellow;
  height: 200px;
}
.Six {
  background-color: Pink;
  height: 400px;
}
.Seven {
  background-color: Grey;
  height: 600px;
}

<div class="One">
</div>
<div class="Two">
</div>
<div class="Three">
</div>
<div class="Four">
</div>
<div class="Five">
</div>
<div class="Six">
</div>
<div class="Seven">
</div>

Answer 1

HTML

<article>
  <section>
    <p class="sect1">1</p>
  </section>
  <section>
    <p class="sect2">2</p>
  </section>
  <section>
    <p class="sect3">3</p>
  </section>
  <section>
    <p class="sect4">4</p>
  </section>
  <section>
    <p class="sect5">5</p>
  </section>
  <section>
    <p class="sect6">6</p>
  </section>
  <section>
    <p class="sect7">7</p>
  </section>
  <section>
    <p class="sect8">8</p>
  </section>
  <section>
    <p class="sect9">9</p>
  </section>
  <section>
    <p class="sect10">10</p>
  </section>
</article>

CSS

*, *:before, *:after {box-sizing:  border-box !important;}

article {
 -moz-column-width: 10em;
 -webkit-column-width: 10em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 

}

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

p {
 min-width: 200px;
 margin:  1rem 0; 
}

.sect1{ min-height: 100px; }
.sect2{ min-height: 200px; }
.sect3{ min-height: 300px; }
.sect4{ min-height: 300px; }
.sect5{ min-height: 500px; }
.sect6{ min-height: 600px; }
.sect7{ min-height: 200px; }
.sect8{ min-height: 400px; }
.sect9{ min-height: 400px; }
.sect10{ min-height: 400px; }

这是链接： https://jsfiddle.net/JPratik2712/huLkhpux/