div内的浮动div具有奇怪的间距

Question

我在一个更大的父div中有div。 所有这些儿童div都有50％的宽度。想法是有2列。 这些儿童div也有动态的高度。

我在这里有一个例子。 https://jsfiddle.net/y2jpr052/

这是通过内联块完成的。正如你所看到的，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;
}

Answer 1

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

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

这里小提琴： https://jsfiddle.net/Math3w_C/y2jpr052/1/

Answer 2

这里你想要的是两列。

所以你只需要添加这个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：https://jsfiddle.net/y2jpr052/10/