为什么这两个相同的内嵌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。