Html 如果上一个元素包含图像，则内联块元素将移到底部

但是，当我用文本替换img标记时，元素的位置与预期的一样（以相同的高度彼此相邻）

发生在所有浏览器上

如何修复它

float:left

不是选项

HTML:

---

只需将

float:left

或

vertical align:top

添加到您的子div：

演示：

---

演示：

只需将

float:left

或

垂直对齐：top

添加到您的子div：

演示：

---

演示：

添加

垂直对齐：top

以在不使用

浮动的情况下进行此操作


添加
vertical align:top
以在不使用
float
的情况下执行此操作


使容器具有
相对位置
和要使用
绝对位置
放置的div具有
顶部：0

用
相对位置制作容器，用
绝对位置制作要定位的div，用
顶部制作div:0

他在问题浮动中提到：左侧不是选项。他在问题浮动中提到：左侧不是选项。
<div id='main'>
    <div id='first'>
      <img src='https://www.google.ru/images/icons/product/chrome-48.png' height='30'>
    </div>
    <div id='second'>Text</div>
</div>

div {
    border: 1px solid gray;
    height: 30px;
}
#first {
    display: inline-block;
    height: 30px;
}
#second {
    display: inline-block;
    height: 30px;
}

#first {
    display: inline-block;
    height: 30px;
    vertical-align: top;
}
#second {
    display: inline-block;
    height: 30px;
    vertical-align: top;
}