Html 如何均匀分布彼此浮动的div（水平和垂直）？

这就是我目前的困境，我在这里试图实现的是这样的目标：

请忽略每个方框/分区的所有内容。请注意，这6个长方体彼此完美且均匀地浮动。这就是我想要复制的

所以我有自己的代码：

HTML

CSS

现在，这样做的结果并不是很成功。我不知道如何计算最后两个div的浮动

这是屏幕截图

你知道代码有什么问题吗？你能帮我解决这个问题吗？

试试看

JS

HTML

---

使用flexbox，而不是float。很多ppl在完成这项工作时都伤了腰。你基本上是在寻找一个“砖石网格”。JS库“砌体”就是一个例子。对于纯CSS版本，我建议看一下以下内容：。第三种解决方案是纯CSS。您将了解到，完成此任务相当困难，需要使用@media查询。谷歌搜索“没有JS的像砖石一样”，你会得到大量的例子来选择……是的，我同意。我决定用砖石而不是纯css嗨@Nenad！谢谢你的回答。我曾考虑过使用它，但想知道这是否可以完全在CSS中完成？我猜正如Madara Uchiha所说的使用flexbox，但我没有太多的经验，所以我不能建议使用它。但既然你们的元素宽度是固定的，我认为砌石是最好的解决方案，但我可能错了。谢谢你的帮助！我决定用砖石来解决这个问题很高兴我能帮忙。同样，在我发布了这个答案之后，我试图用flexbox做同样的事情，但我想不出来。

<div class="tentofifteen">
    <section class="grid-superloop-ten" id="wired-superloop">
    </section>
    
    <section class="grid-superloop-eleven" id="wired-superloop">
    </section>
    
    <section class="grid-superloop-twelve" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen" id="wired-superloop">
    </section>
</div>

    <style>


.tentofifteen {
    height: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#wired-superloop {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.tentofifteen:after {
    content:"";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
    
    
    
    
    
        </style>

$('.tentofifteen').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 1
});

<div class="tentofifteen">
    <section class="grid-superloop-ten grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-eleven grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-twelve grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-thirteen grid-item" id="wired-superloop">
    </section>

    <section class="grid-superloop-fourteen grid-item" id="wired-superloop">
    </section>
</div>