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

【问题标题】：Floated divs inside a div has bizarre spacingdiv 内的浮动 div 具有奇怪的间距
【发布时间】：2015-07-29 11:05:59
【问题描述】：

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

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

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

【问题讨论】：

您是在抱怨两列之间的水平空间太小，还是试图让 div 垂直堆叠（没有垂直空间）？
是的，没有垂直空间。我附上了一个例子。

标签： html css layout css-float

【解决方案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/

【讨论】：

谢谢，但也许我不清楚。列中每个 div 下面的间距应该是一致的。我不关心基于列的对齐方式。目前布局类似于表格格式，我不希望这样。

【解决方案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/

【讨论】：

太棒了，谢谢。但是，订单不会被保留。我想保持与我的小提琴相同的顺序。这可能吗？
@ShivamD - 您似乎想要一种布局算法，其中元素从左到右，从上到下放置，但随后每个元素尽可能向上浮动。不，我认为这不可能。