html - 如何在网格中正确排列(不同的)正方形？

Question

我的标准布局(最小宽度 1024 像素)有 4 行。第一个和最后一个有 6 个正方形，中间有两个组合正方形。但是第三行的第一个方 block 不见了。我没有使用不同的 CSS 设置。我试过 clear: both 或 float:left 等

这里你可以看到这个洞，结果屏幕需要最小宽度为 1024px:

http://jsfiddle.net/fwsh8ov0/

还没有为较小的屏幕做任何配置。

Answer 1

由于 float 的性质，您想要实现的目标不适用于 float 容器。 float:left; 表示容器尽可能向左移动，或者如果没有足够的水平空间，它会尽可能向下移动，然后再向左移动。

在你的例子中，中间有两个巨大的正方形。在这些之后，第一个方 block 位于它们的右侧，但第二个方 block 需要向下移动，因为它缺少水平空间。降档后还是不能左移，因为中间还有那个巨大的正方形...

要实现您想要的效果，您可以将 html table 与 colspan 和 rowspan 一起使用，或者您可以使用容器的绝对定位，取决于您的要求。