删除浮动 DIV 之间的垂直空间

Question

有人可以为我指出正确的方向来删除不同大小的 DIV 之间的垂直空间吗？当它们的高度相同但它们的高度都会变化时，它们（显然）工作正常，我希望它们看起来很酷。

我希望它们都嵌套在彼此下方（如第三列）。

HTML：

    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>

CSS：

.productDivs {
    max-width: 290px;
    min-height: 50px;
    margin-bottom: 25px;
    margin-right: 18px;
    padding: 5px;
    border: 1px solid #e0e1dd;
    float: left;
    display: block;
}

这是我目前所拥有的fiddle。

请温柔，我还在学习 CSS :)

Answer 1

我建议结合使用 Masonry 和 imagesLoaded 库

http://masonry.desandro.com/

http://imagesloaded.desandro.com/

先调用 imagesLoaded 库，再调用 masonry，显示效果应该不错。

**HTML**
<div class="productDivsWrapper">
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    ...
</div>

**JS**
$('.productDivsWrapper').imagesLoaded( function() {
    $(".productDivsWrapper").masonry(
        {
            itemSelector:'.productDivs',
        }
    );
});

这里有一个 jsfiddle ： https://jsfiddle.net/1hc31mth/1/

Answer 2

这不是一个简单的答案。 float:left 将使其环绕在其上方行右侧的最高框的底部边缘下方。所以你最终得到了这些垂直的排水沟。当我在http://www.eonline.com 工作时，我们在主页上遇到了同样的问题。

我的朋友 Lou 为该网站创建了所谓的 Liquid Pinning 引擎。当他陷入困境时，我能够帮助他修复它。你可能想通过这个脚本来寻找一些关于如何移动 div 的答案：http://www.eonline.com/resources/js/liquid_pinning/liquid_pinning.js

我相信它们是绝对定位的，使用固定的像素高度。有数组，可以跟踪每列的总高度并根据需要调整列。该脚本会找到放置 div 的位置并将其放置到该垂直空间区域中，这样就不会创建垂直间隙。

这是一个非常酷的作品，我们以http://www.pinterest.com 网站为蓝本。看起来您的 div 正在尝试实现相同的效果。

注意：创建该脚本是为了启用当用户在主页上调整分辨率时出现的 3 列宽到 4 列宽到 5 列宽的外观。它还会根据需要将固定的小部件固定在右上角和左上角。尝试放大和缩小以查看该效果。

Answer 3

这是问题的解决方案（CSS，没有垂直间距，砖石布局） https://stackoverflow.com/a/25668648/871781