jquery append（）與css顯示的奇怪交互：inline-block

Question

我想創建一個網頁，其中兩個div部分水平相鄰顯示。其中一個我想追加隨時間變化的內容。我注意到如果我使用css顯示：inline-block來對齊兩個div部分，然後使用append（）在第一部分中插入一個段落，則第二個部分被按下以與段落塊對齊。我知道我可以通過使用float：left來解決這個問題，但我仍然不明白爲什麼內聯塊的行爲如此。我想知道是否有一種方法可以使內聯塊的工作，以防我真的需要使用，而不是浮動。這裏的jsfiddle：Link

<div id="left">left</div> 
<div id="right">right</div> 

#left, #right{ 
    background-color:#ff0; 
    width: 100px;height: 100px; 
    display:inline-block;} 

<script> 
    $("#left").append("<p>Paragraph</p>"); 
</script> 

Answer 1

使用 display: inline-block時，你必須添加 vertical-align: top如果你想要的元素在頂部顯示

：

JSFIDDLE

的原因是inline-block元素被設置爲baseline默認