html - 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/

我怎样才能解决这个问题？

score 3 · Accepted Answer

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

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

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

如果这不是您想要的，请告诉我，我很乐意为您提供进一步的帮助！

score 1 · Accepted Answer

font-size:0通过放置在身体上来消除 div 之间的空间，然后放在overflow:hidden盒子上。

score 1 · Accepted Answer

只需像这样添加overflow:hidden;到short-desk类中：-

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

3 回答 3