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

【问题标题】：<h2> interfering with vertical-align of inline divs<h2> 干扰内联 div 的垂直对齐
【发布时间】：2013-12-16 10:02:05
【问题描述】：

我有两个内联 div，其中第二个使用 vertical-align: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>

【问题讨论】：

标签： css html alignment vertical-alignment

【解决方案1】：

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

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

Try this

或者只是尝试制作你的第一个 div float:left:

Try this

【讨论】：

太好了，成功了！我现在在原始右 div 中添加了两个嵌套 div，它们拒绝再次对齐。我已经为每个下一个 div 添加了 display:inline-block 和 vertical-align:top 属性，但这没有用。我正在将新代码添加到原始问题中。
好的，你能提供一个JsFiddle吗？
是的，你是对的，没有对齐。但这是由 img 元素宽度引起的。请检查这个小提琴jsfiddle.net/hgN9U/2
这很奇怪。当“文本段落”被更长的东西替换时，比如一个真正的文本块，所有的 div 再次下降到原来的左 div 之下。
这是因为Paragraph标签是块元素，如果你在Paragraph标签里面放了很大的内容。它覆盖全宽。所以你可以使用固定宽度的“word-break”CSS 属性。试试 jsfiddle：jsfiddle.net/hgN9U/3

【解决方案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

【讨论】：