css - 删除 float DIV 之间的垂直空间

Question

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

我希望它们都嵌套在彼此下面(如第 3 列)。

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/