如何在网格中正确排列（不同的）正方形？

Question

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

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

http://jsfiddle.net/fwsh8ov0/

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

Answer 1

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

在您的情况下，中间有这两个巨大的正方形。在这些之后，第一个正方形放置在它们的右侧，但第二个需要向下移动，因为它缺少水平空间。降档后还是不能左移，因为中间还有那个巨大的方块……

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

Answer 2

我不知道你想要实现什么，但如果你想明确地有四行，那么也许你应该定义一个行对象。类似于以下内容：

<div class="row">
   <div class="square quarter"></div>
   <div class="square quarter"></div>
   <div class="square quarter"></div>
   <div class="square quarter"></div>
</div>

<div class="row">
   <div class="square half"></div>
   <div class="square half"></div>
</div>

<div class="row">
   <div class="square half"></div>
   <div class="square half"></div>
</div>

<div class="row">
   <div class="square quarter"></div>
   <div class="square quarter"></div>
   <div class="square quarter"></div>
   <div class="square quarter"></div>
</div>

对于row 元素的样式，您可以将display:block; 与float:left 或display:inline-block 一起用于子元素；或display:table 和display: table-cell 为孩子。后者更容易实现，因为您无需担心清除浮动或删除内联之间的空白。这是一个示例小提琴：http://jsfiddle.net/fqdgfd9u/2/

编辑：如果您不想使用“行对象”，您可以使用inline-block 或float:left 实现相同的目的。这是display: inline-block:http://jsfiddle.net/mpq6cp7j/的小提琴。它不会那么整洁，但我真的不知道你想做什么来使这篇文章更具体。