Question

HTML

<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>Why does this div stays at the top</p>
</div>

CSS

.menu{
    width:120px;
    background-color:red;
    display:inline-block;
    height:400px;
}

http://jsfiddle.net/jezVt/

我使用内联块将四个div彼此相邻排列。当我使用p标签在div中输入文本时，带有两行的div保持在顶部，而其他三个div（只有一行文本）正确对齐。

请帮助..

Answer 1

添加代码vertical-align:top; demo

Answer 2

write vertical-align:top; in css:http://jsfiddle.net/aashi/jezVt/1/

Answer 3

从我的第一眼看，是你在第四栏中有很多文字。

但是使用＆＃34; vertical-align：top;＆＃34;作为前两个答案。

Answer 4

原因是，就像每个内联元素一样，您的.menu元素的baseline属性的默认值为vertical-align。这意味着当浏览器计算并排显示的.menu元素的布局时，每个元素的位置使得其内容的基线与其他元素的基线垂直对齐

在这种特定情况下，这意味着每个.menu中最后一行文本的基线与其他文本的基线一致。您会注意到，通过添加更多文本并使其占据三行或更多行，包含此文本的元素将被“向上拉”＆＃34;与其他人相比越来越多。

最后，正如大家所说，使用vertical-align: top让浏览器知道您希望div与其内容的 top 对齐，从而产生所需的结果。< / p>

Answer 5

为什么要将div设为inline-block。当div是块级元素时，您可以使用该属性本身。

[http://jsfiddle.net/jezVt/12/][1]

Answer 6

或者你可以尝试：

.menu{
    width:120px;
    background-color:red;
    display:inline-block;
    height:400px;
    float:left;
    margin: 2px;
}

使用display inline-block时出现奇怪的行为......为什么？

6 个答案: