爲什麼這兩個相同的內嵌div在一個文本中沒有對齊，另一個沒有？

Question

因此，這裏有兩個相同的div：

HTML

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

CSS

#left, #right 
{ 
    width: 100px; 
    height: 40px; 
    border: 1px solid gray; 
    display: inline-block; 
} 

這些渲染就好了，因爲兩個相同的盒子並排側（小提琴：http://jsfiddle.net/URy59/）。

但隨着文本在一個DIV，並沒有在其他，他們是錯位！ （小提琴：http://jsfiddle.net/URy59/1/）

這...

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

...結果：

此行爲是可重複使用<span>爲好。

這是什麼原因造成的？爲什麼？什麼是一個很好的解決方案？

Answer 1

簡短回答：將vertical-align屬性設置爲top。

較長的答案：內聯元素的default vertical alignment is baseline。當你的div沒有內容時，他們排隊很好。然而，當你添加的文字時，瀏覽器會再向下，使文本坐在基線移動DIV：

通過改變對齊到頂部，你對齊的div你需要的方式。

jsFiddle example

Answer 2

您需要垂直對齊的元素：

#left, #right { 
    ... 
    vertical-align: top; 
} 

JSFiddle demo。