如何将div/snap/fit div封装成网格布局，TETRIS样式？

Question

我有一个很难解释的话把我找的，所以这里有一个例子：

http://jsfiddle.net/toaeb0zt/

<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和更深层次的编程，但我知道它可能是最好的选择。我很感谢这个社区的帮助;先谢谢你。

Answer 1

你对我的看法就像是一场恶梦！有很多的libs可以帮助你把这个网格放在一起。砌体网格将最符合您的要求。

砌体工程通过将元素放置在基于可用垂直空间的最佳位置上，有点像石匠在墙上镶嵌石块。您可能已经在整个互联网上看到了它的使用。

我已经使用同位素很多！这是对很多事情可以用同位素做一： http://codepen.io/desandro/pen/mEinp

$(function() { 

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

研究的网站非常仔细地

http://isotope.metafizzy.co/

希望这有助于/这个解决方案需要的JavaScript（和jQuery）

Answer 2

你可以使用一个块表，只是每个块都有一个颜色。你可以使用css和一个简单的表格来完成。

这里是一个小提琴，http://jsfiddle.net/r3vycfa1/

我还不能肯定你要找的，但是这将是更加敏感。

类.a，.b，.c每个都有不同的颜色，您可以将它们应用于块。

HTML

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

CSS：

* { 
    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; 
}