html - CSS 在同一列但不同行上有图像

Question

自 3 天以来，我一直处于这种情况，但我没有找到我的问题的任何答案:如何在列上有相同宽度的 div(包含宽度为 320px 的图像)(已经完成)但没有排队组织？

让我加入一个小草图来解释一下:在左边，这就是我所拥有的。在右边，这就是我想要的。 (第二行用于减小屏幕/导航器宽度时的“媒体屏幕”:因此有 4 比 3 比 2 比 1(反之亦然)。注意框的数量):

为了解释我如何获得这个正确的部分，这里是代码:

html:

<div class="box">
<a href="#"><img src="#" alt=""/></a>
</div>

简单的继承这个类，直接放在body上就可以了。 盒子很重要，因为也许我必须要有标题或其他东西。

CSS:

.box {
    position: relative;
    float: left;
    min-width: 340px;
    max-width: 24.80%;
    width: 24.79%;
    margin: 20px 0px 20px 0px;
}

@media only screen and (max-width: 1800px) {
    .box {
        min-width: 360px;
        max-width: 33%;
        width: 33%;
    }   
}

要完成这个问题，这里有一个限制:它必须是动态的和通用的(这样，我只需要复制一个 div 并替换图像的链接(在添加 php 和 js 之前) ，或添加我想要的任何内容)。

Answer 1

您应该查看 jQuery Masonry ( http://masonry.desandro.com )，它正是您所需要的。

如果您出于某种原因不能使用 Masonry，您应该首先将您的页面分成几列。然后在每一列中堆叠 div 框。