<h2> 干扰内联 div 的垂直对齐

Question

我有两个内联div，其中第二个使用垂直对齐：top。问题是，第二个div以h2开头，然后是一些内容，并且h2根据定义不听取垂直对齐。因此h2正在向下拖动其余内容。我该怎么解决？

<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline; vertical-align:top;">
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>

多亏了@Ishan Jain和@Hiral的回答，修复才得以成功。我现在有一个类似的问题，在原来的右div中有两个嵌套的div

<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline-block; vertical-align:top;">
<h2>Heading</h2>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="233">
</div>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="191">
</div>
<p>
    Paragraph of text
</p>
</div>

Answer 1

必须使用display:inline-block;使div内联。此属性允许DOM元素具有块元素的所有属性，但保持其内联。

使用此：style="display:inline-block; vertical-align:top;"

试试这个

或者试着让你的第一个div float:left:

试试这个

Answer 2

尝试：

HTML

<div>
    <img src="" width=300 height=600>
</div>
<div>
    <h2>Heading</h2>
    <p>
        Paragraph of text
    </p>
</div>

CSS：

div{
    display:inline-block; //change from inline to inline-block
    vertical-align:top;
}

DEMO