我很难用语言解释我要寻找的东西，所以这是一个例子：
<div style="width:800px ">
<div style="width:200px;height:500px; background:purple; float:left"></div>
<div style="width:200px;height:200px; background:blue; float:left"></div>
<div style="width:200px;height:200px; background:green; float:left"></div>
<div style="width:200px;height:400px; background:yellow; float:right"></div>
<div style="width:400px;height:200px; background:orange; float:left"></div>
<div style="width:200px;height:200px; background:brown; float:left"></div>
<div style="width:400px;height:200px; background:gray; float:left"></div>
<div style="width:200px;height:100px; background:red; float:left;"></div>
</div>
此布局是使用CSS结合左右浮动组成的。我阅读了有关flexbox的文章，以了解它是否可以这样做，但这似乎是负面的。
我意识到可以通过将div嵌套到更大的div中来完成，但是我需要对此做出响应，而这种解决方案会使响应成为噩梦。
我一直在尝试远离jQuery和更深入的编程，但是我知道这可能是最好的选择。我感谢这个社区的帮助；先感谢您。
在我看来，您是否正在做噩梦！有很多库可以帮助您将网格合并在一起。砌体网格将最符合您的要求。
砌体的工作原理是根据可用的垂直空间将元素放置在最佳位置，就像砌墙的石匠一样。您可能已经在Internet上看到了它的使用。
我已经大量使用了同位素！这是您可以使用同位素进行的许多操作之一：http : //codepen.io/desandro/pen/mEinp
$( function() {
$('.isotope').isotope({
layoutMode: 'fitColumns',
itemSelector: '.item'
});
});
仔细研究网站
希望对您有所帮助/此解决方案将需要JavaScript（和jQuery）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句