div里面的浮动div有奇怪的间距 [英] Floated divs inside a div has bizarre spacing

问题描述

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

我有一个例子。

I have divs inside a a larger parent div. All these child divs have a 50% width. The idea is to have 2 columns. Also these child divs have a dynamic height.

I have an example here. https://jsfiddle.net/y2jpr052/

This is done with inline-block. And as you can see, there is bizarre spacing between the divs. What is that exactly? And how can I get rid of it. Thanks!

UPDATE: I see that the divs are all aligned on the top per row, hence the weird spacing. That's what I want to get rid of.

Another update: Basically no vertical spacing. Or spacing depending on the margin/padding of the children div. Each colored box here being a floated div with dynamic height.

#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;
}

解决方案

What you want here is two columns.

So you just need to add this 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;

See this jsfiddle: https://jsfiddle.net/y2jpr052/10/

这篇关于div里面的浮动div有奇怪的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！