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

我有两个内嵌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>

标题
标题
标题

段落

试试：

HTML

---

必须使用

显示：内联块用于使div内联。
此属性允许DOM元素具有块元素的所有属性，但保持其内联

使用以下命令：
style=“显示：内联块；垂直对齐：顶部；”


或者尝试将第一个div设置为float:left

：

---

太好了，它成功了！我现在在原来的右div中添加了两个嵌套div，它们拒绝再次对齐。我已经在每个下一个div中添加了display:inline块和vertical align:top属性，但这并没有起作用。我在原来的问题中添加了新的代码。好的，你能提供一个JSFIDLE吗？是的，你是对的，没有对齐。但这是由img元素宽度引起的。请检查这把小提琴这很奇怪。当“文本段落”替换为更长的文本块时，所有的div都会再次降到原来的左div下方。这是因为段落标记是一个块元素，如果在段落标记中放入较大的内容。它的封面是全宽的。因此，您可以使用固定宽度的“分词”CSS属性。试试JSFIDLE：

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

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