内联块的垂直定位

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; buyt因为我认为在inline-block的元素的情况下flaot一个更强大的是会不会在任何断点持续，也对于没有申请重置为身体。