内联块的垂直定位

Question

这个问题很难用文字来解释，所以我会链接到一个jsFiddle。 jsFiddle。如果您查看任何链接，您将看到一些处于不同级别的框。这些应该在屏幕上平铺，有点像你可以看到here。如何阻止它们在元素上方形成奇怪的垂直间距并使它们正确拼接？我认为它是由每个元素内容有不同高度引起的，但我不知道如何解决它。以下是您可以在jsFiddle中找到的代码：
HTML：

<div id="elements">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>

CSS：

#elements div {
    display:inline-block;
    width:250px;
    height:250px;
    border:solid thin #000;
}

Answer 1

将vertical-align: top;添加到CSS规则。

Answer 2

有很多技巧可以解决这个问题。将这些元素浮动为 -

#elements div {
    display:inline-block;
    width:250px;
    height:250px;
    border:solid thin #000;
    float:left;
}

或vertical-align: top;因为我认为在内联块元素的情况下，一个更强大，不会在任何断点处持续，并且还没有应用到身体的重置。