图片扰乱了 div 个位置

Question

我连续三个div，都是display: inline-block。左边的（绿色）包含一个图像。由于该图像，另外两个 divs（蓝色和黄色）和它们下方的 div（灰色）都位于图像高度较低的位置。

为什么一个 div 中的图像会影响行内块行中其他 div 的位置？我怎样才能避免它？

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background: black;
}
div {
  display: inline-block;
  width: 300px;
  height: 70px;
}
div.wrapper {
  width: 900px;
  height: 100px;
  margin: 0 auto;
  background: red;
  display: block;
  font-size: 0;
}
div.div1 {
  background: green;
}
div.div2 {
  background: blue;
}
div.div3 {
  background: yellow;
}
div.div4 {
  display: block;
  width: 900px;
  height: 30px;
  background: grey;
}

<body>
  <div class="wrapper">
    <div class="div1">
      <img src="" width="25px" height="25px">
    </div>
    <div class="div2">b</div>
    <div class="div3">c</div>
    <div class="div4">d</div>
  </div>
</body>

Answer 1

已经有关于内联块元素的讨论仍然有奇怪的高度（像这里）：Why does inline-block cause this div to have height?

老实说，我不会解决这些问题，而是会用浮点数来解决这个问题：

* {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        background: black;
    }
    div {
        /*display: inline-block;*/ /* Not necessary when using floats! */
        width: 300px;
        height: 70px;
    }
    div.wrapper {
        width: 900px;
        height: 100px;
        margin: 0 auto;
        background: red;
        display: block;
        font-size: 0;
    }
    div.div1 {
        background: green;
        float: left; /* Added float left here */
    }
    div.div2 {
        background: blue;
        float: left; /* Added float left here */
    }
    div.div3 {
        background: yellow;
        float: left; /* Added float left here */
    }
    div.div4 {
        display: block;
        width: 900px;
        height: 30px;
        background: grey;
    }

Answer 2

对于 div 的 float:left; display:block; 尝试 float:left; display:block; 而不是 inline-block：Demo

CSS:

.div1, .div2,.div3 {
    display: block;
    float:left;
    width: 300px;
    height: 70px;
}

图片扰乱了 div 个位置

Image disrupts div positions

html

css

css-position