Question

然而，当我用文本替换img标签时 - 元素的位置与预期相同（彼此相邻且高度相同）。

发生在所有浏览器上。

如何解决？

float: left不是一个选项

HTML：

<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>

CSS：

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

Answer 1

在没有vertical-align: top的情况下添加float。

jsFiddle

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

Answer 2

使用relative position制作容器，使用absolute position和top:0;制作要放置的div

http://jsfiddle.net/uqAGt/

Answer 3

只需将float: left或vertical-align: top添加到您的子div：

演示：http://jsfiddle.net/dsUnc/2/

演示：http://jsfiddle.net/dsUnc/5/

如果前一个元素包含图像，则内联块元素将移至底部

3 个答案: