2

这个问题很难用语言来解释，所以我将链接到一个 jsFiddle。js小提琴。如果您查看任何链接，您将看到一些处于不同级别的框。这些应该平铺在屏幕上，有点像你在这里看到的。如何阻止它们在元素上方出现奇怪的垂直间距并让它们正确平铺？我认为这是由每个元素内容具有不同的高度引起的，但我不知道如何解决它。这是您可以在 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;
}
4

2 回答 2

0

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

于 2013-04-06T04:22:54.617 回答
0

有很多技术可以解决这个问题。要么浮动这些元素，如 -

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

或者vertical-align: top;我认为在内联块元素的情况下购买，浮动一个更健壮，不会在任何断点处持续存在，而且您还没有对主体应用重置。

于 2013-04-06T20:27:01.100 回答