将文本添加到内联块div会强制它向下浮动

Question

如果我有以下HTML

<div class="one">
    Test
</div>
<div class="two">

</div>
<div class="three">

</div>

和以下CSS：

div {
    display:inline-block;
    height:30px;
    width:100px;
}

.one,
.three
{
    background-color:#CCCCCC;
}

.two
{
 background-color:#EEEEEE;
}

三个div不会彼此相邻Fiddle here：

为什么以及如何阻止这种情况？

删除文字，看起来我希望它们看起来像Fiddle here：

Answer 1

将div上的vertical-align属性设置为top：

div {
    vertical-align:top;
}

<强> jsFiddle example