Question

我连续有三个div，都是display: inline-block。左边的一个（绿色）包含一个图像。由于该图像，另外两个div（蓝色和黄色）和它们下方的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;而不是inline-block： Demo

CSS：

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

图像扰乱了div的位置

2 个答案: