HTML：為什么Div不在上角？

Question

我彼此串聯2 div。 如果第二個div長2行，則第一個div不再位於頂角...

這是為什么？

編輯：為什么div1在第二個div有1行但沒有2條或更多行時會自動垂直對齊？

檢查http://jsfiddle.net/d5Z6V/354/

<div id="wrapper">
    <div id="div1">Not in top corner</div>
    <div id="div2">
        <div>asd</div>
        <div>asd</div>
    </div>
</div>
<br>
<div id="wrapper">
    <div id="div1">In top corner</div>
    <div id="div2">
        <div>asd</div>
    </div>
</div>

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

Answer 1

您需要像這樣垂直對齊頂部：

 #wrapper { border: 1px solid blue; } #div1 { display: inline-block; width:120px; height:120px; border: 1px solid red; vertical-align: top; } #div2 { display: inline-block; width:160px; height:160px; border: 1px solid green; vertical-align: top; } 

 <div id="wrapper"> <div id="div1">Not in top corner</div> <div id="div2"> <div>asd</div> <div>asd</div> </div> </div> <br> <div id="wrapper"> <div id="div1">In top corner</div> <div id="div2"> <div>asd</div> </div> </div> 

Answer 2

添加vertical-align：top; 到＃div1