Question

有没有办法在不使用列或行的情况下缩小元素之间的间隙？

我已经构建了这个

<div class="box">
    <p>Short height</p>
</div>
<div class="box">
    <ul>
        <li>Something</li>
        <li>To</li>
        <li>make</li>
        <li>height</li>
    </ul>
</div>
<div class="box">
    <p>Short height</p>
</div>
<div class="box">
    <p>Oh no! I'm not in the place where I should me! DX </p>
</div>

CSS

.box{
    width:30%;
    margin:0% 1.6666%;
    float:left;
}

如何在前一个最长元素的高度之后使元素停止启动。甚至不太确定怎么说出来！？

因此，第4个元素应该从元素正下方开始，而不是从最高层开始。它甚至可能吗？

Answer 1

你的CSS中的margin属性正在解决问题。只需删除保证金。如果这是可行的解决方案，请告诉我。

Answer 2

您可以尝试将它们放在同一个框中以将它们保持在一起或尝试删除边距

这是删除边距的小提琴

https://jsfiddle.net/49uzyskh/

CSS

.box{
    width:30%;
    /*margin:1.6666%;*/
    float:left;
}

Answer 3

你的意思是这个布局：

http://desandro.github.io/masonry/demos/infinite-scroll.html

如果是，你可以在这里参考插件： Masonry Plugin

您也可以参考此插件：Isotope

浮动左，流畅的布局

3 个答案: