Question

我有两个内联div，第二个使用vertical-align：top。问题是第二个div以h2开头，然后是一些内容，而h2根据定义不会听取vertical-align。所以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

尝试：

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

Answer 2

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

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

Try this

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

Try this

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

2 个答案: