Html div中的浮动div具有奇怪的间距

我在一个较大的父div中有div。 所有这些子div都有50%的宽度。这个想法是有两个专栏。 这些子div也具有动态高度

#index.html

<div id="modules">
  <div id="m1"  class="module">m1</div>
  <div id="m2"  class="module">m2</div>
  <div id="m3"  class="module">m3</div>
  <div id="m4"  class="module">m4</div>
  <div id="m5"  class="module">m5</div>
  <div id="m6"  class="module">m6</div>
  <div id="m7"  class="module">m7</div>
  <div id="m8"  class="module">m8</div>
  <div id="m9"  class="module">m9</div>
  <div id="m10" class="module">m10</div>
</div>

#index.css

#modules {
  width: 100%;
  border: 1px solid red;
  overflow: auto;
}

 .module {
  display: inline-block;
  width: 45%;
  height: 50px;
  border: 1px solid black;
}

#m1 {
  height: 70px;
}

#m2 {
  height: 40px;
}

#m3 {
  height: 100px;
}

#m4 {
  height: 100px;
}

#m5 {
  height: 85px;
}

#m6 {
  height: 70px;
}

#m7 {
  height: 55px;
}

#m8 {
  height: 77px;
}

#m9 {
  height: 100px;
}

我这里有一个例子。

这是通过内联块完成的。正如你所看到的，两个div之间有着奇怪的间距。那到底是什么？我怎样才能摆脱它。 谢谢

更新： 我看到每行的div都在顶部对齐，因此出现了奇怪的间距。这就是我想要摆脱的

另一个更新：基本上没有垂直间距。或间距取决于子div的边距/填充。此处的每个彩色框都是具有动态高度的浮动div

#index.html

<div id="modules">
  <div id="m1"  class="module">m1</div>
  <div id="m2"  class="module">m2</div>
  <div id="m3"  class="module">m3</div>
  <div id="m4"  class="module">m4</div>
  <div id="m5"  class="module">m5</div>
  <div id="m6"  class="module">m6</div>
  <div id="m7"  class="module">m7</div>
  <div id="m8"  class="module">m8</div>
  <div id="m9"  class="module">m9</div>
  <div id="m10" class="module">m10</div>
</div>

#index.css

#modules {
  width: 100%;
  border: 1px solid red;
  overflow: auto;
}

 .module {
  display: inline-block;
  width: 45%;
  height: 50px;
  border: 1px solid black;
}

#m1 {
  height: 70px;
}

#m2 {
  height: 40px;
}

#m3 {
  height: 100px;
}

#m4 {
  height: 100px;
}

#m5 {
  height: 85px;
}

#m6 {
  height: 70px;
}

#m7 {
  height: 55px;
}

#m8 {
  height: 77px;
}

#m9 {
  height: 100px;
}

#index.html
m1
平方米
m3
m4
m5
m6
m7
m8
m9
m10
#index.css
#模块{
宽度：100%；
边框：1px纯红；
溢出：自动；
}
.模块{
显示：内联块；
宽度：45%；
高度：50px；
边框：1px纯黑；
}
#m1{
高度：70像素；
}
#平方米{
高度：40px；
}
#m3{
高度：100px；
}
#m4{
高度：100px；
}
#m5{
高度：85px；
}
#m6{
高度：70像素；
}
#m7{
高度：55px；
}
#m8{
高度：77px；
}
#m9{
高度：100px；
}

将DIV的父DIV的字体大小设置为0将解决此问题

#modules { font-size:0px; }
.module { font-size:12px;} /*Or any size that you like*/

在这里拉小提琴：

---

这里需要的是两列

因此，您只需添加以下css：

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;

-webkit-column-gap: 0px; /* Chrome, Safari, Opera */
-moz-column-gap: 0px; /* Firefox */
column-gap: 0px;

---

看到这个jsfiddle:

谢谢，但也许我不清楚。列中每个div下方的间距应一致。我不关心基于列的对齐方式。当前布局类似于表格格式，我不希望出现这种情况。您是在抱怨两列之间的水平空间太小，还是在尝试垂直堆叠div（没有垂直空间）？是没有垂直空间。我附上了一个例子。太棒了，谢谢你。然而，这一秩序并未得到保留。我想保持和小提琴一样的秩序。这可能吗？@ShivamD-你似乎想要一个布局算法，元素从左到右，从上到下，然后每个元素都尽量向上浮动。不，我认为那是不可能的。