Html 如何将div包装/捕捉/调整为俄罗斯方块风格的网格布局？

我很难用语言来解释我在寻找什么，所以这里有一个例子：

这个布局是用CSS结合左浮动和右浮动完成的。我读了关于flexbox的文章，想看看它是否能做到这一点，但这似乎是一个负面的结果

我意识到这可以通过将div嵌套到更大的div中来实现，但我需要使其具有响应性，而这种解决方案将使响应性成为一场噩梦

---

我一直试图远离jQuery和更深入的编程，但我知道这可能是最好的选择。我感谢这个社区的帮助；提前谢谢你。

你在做什么对我来说就像一场噩梦！有很多LIB可以帮助你将这个网格整合起来。砌体网格最符合您的要求

砌体工程是根据可用的垂直空间将构件放置在最佳位置，有点像石匠在墙上安装石头。你可能已经看到它在互联网上被广泛使用

我用了很多同位素！这是你可以用同位素做的许多事情之一：

仔细研究这个网站

---

希望这有帮助/此解决方案需要JavaScript（和jQuery）

您可以使用一个块表，只需为每个块着色即可。您可以使用css和一个简单的表来实现这一点

这是一把小提琴

我不确定你在寻找什么，但这会更有反应

类.a、.b、.c各有不同的颜色，您可以将它们应用于块

HTML

---

有相当多的lib可以为您做到这一点，例如，它需要jquery。其他一些选择：当你说“俄罗斯方块风格”时，你是否也希望在布局中使用L形？还是仅仅是四边形？@谢谢。它们似乎能够解决我的问题，只要某些项目可以有2行/列宽（似乎可以）。@kevin628只有4边形状。谢谢你帮我更详细地定义这个问题。谢谢你的时间和创造力，但我还不够清楚。我的意思是使用俄罗斯方块类比来避免元素之间的空白，不管行或列的跨度如何。尽管这似乎在某些方面解决了这个问题，但在响应能力和重新调整元素方面，它创造了其他方面。再次感谢。对不起，您的问题不是很清楚，这个解决方案实际上避免了元素之间的空白。非常感谢。这是一个完美的例子，我正在努力完成。我会调查同位素；我已经听过很多次了；也许是我认识的时候了。：）

<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>

$( function() {

  $('.isotope').isotope({
    layoutMode: 'fitColumns',
    itemSelector: '.item'
  });
});

<table>
    <tr>
        <td class="a">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="a">&nbsp;</td>
        <td>&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="c">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

* {
    margin: 0;
    padding: 0;
}
table {
    width: 500px;
    height: 500px;
    border-spacing: 0px;
}
td {
    width: 10%;
    height: 10%;
}
.a {
    background-color: #00FF00;
}
.b {
    background-color: #FF0000;
}
.c {
    background-color: #0000FF;
}