需要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/