CSS显示内联块顶部对齐

Question

我有几个div，我想在两列中显示为单独的框。

HTML：

<div class="short-desk">
   <p>BOX 1</p>
</div>

<div class="short-desk">
   <p>BOX 2</p>
</div>
...

CSS：

.short-desk {
    display: inline-block;
    width: 42%;
    height: 180px;
    border:1px solid #000;
}

结果：

我尝试使用css diaplay：inline-block属性，但是对齐有一些问题： 一行中的2个盒子不在同一级别上。

实际上它们在内部使用小文本时工作正常，但是，当我放一点文字时，它们的级别会发生变化并且彼此不匹配。

在此处查看演示：

  

http://jsfiddle.net/zur4ik/TUGup/1/

我该如何解决这个问题？

Answer 1

实际上，您无意中将解决方案放在了问题标题中。

将此样式添加到您的定义似乎给出了预期的行为：

.short-desk {
    vertical-align:top;
}

这是一个updated JSFiddle。

如果这不是你想要的，请告诉我，我会很乐意进一步帮助你！

Answer 2

将font-size:0放在身体上，然后将overflow:hidden放在方框上，删除div之间的空格。

http://jsfiddle.net/TUGup/2/

Answer 3

只需将overflow:hidden;添加到short-desk类，如下所示： -

.short-desk {
    display: inline-block;
    width: 42%;
    height: 180px;
    border:1px solid #000;
    overflow:hidden;           // Add this
}

<强> FIDDLE LINK