动态调整网格单元格大小

Question

我正在尝试创建一个两行，三列网格布局：

这很简单。我想知道如何扩展任何一个给定的单元格，导致其他单元格在扩展单元格周围重新排列：

我不是必须寻找纯CSS解决方案。我有它工作，但我根据我正在扩展的单元格来硬编码绝对位置，这感觉很脏：/谢谢！

Answer 1

您可以使用像树形图这样的bin-packing解决方案。您可以对矩形进行排序并创建树，然后沿2轴分割树。选择下一个项目并将其放在最佳可用空间中。然后重启该过程。有一个jquery treemap插件。这是一个示例，但包装光照贴图。这是一个伪代码：http://www.blackpawn.com/texts/lightmaps/。

Answer 2

如果你总是要有一个3x2网格，我不会看到硬编码部分的危害。

这是一个使用CSS的解决方案，如果它们是行中的中间或最后一个图块，只需将图块移动一点。 http://jsfiddle.net/m2pWL/1/ 你可以点击方块使它们更大。

请注意，＃wrapper需要具有此公式的宽度

(3 * [width of small square]) + 6

这是因为边框占用了1个像素。