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

Question

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

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

http://jsfiddle.net/fwsh8ov0/

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

Answer 1

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

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

为了达到你想要的效果，你可以使用 html table 与 colspan 和 rowspan，或者你可以使用容器的绝对定位，这取决于你的要求。

Answer 2

我不知道你想要达到什么目的，但如果你想明确地拥有四行，那么也许你应该定义一行 object。类似于以下内容：

<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 用于 child；或 display:table 与 display: table-cell 对应 child。后者会更容易实现，因为您无需担心清除浮动或删除内联之间的空格。这是一个示例 fiddle：http://jsfiddle.net/fqdgfd9u/2/

编辑：如果您不想使用 "row object"，您可以使用 inline-block 或 float:left 来实现同样的效果。这是 fiddle 和 display: inline-block：http://jsfiddle.net/mpq6cp7j/。它不会那么整洁，但我真的不知道你想做什么来使这个 post 更具体。

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

How can I arrange (different) squares in a grid correctly?

html

css

grid

layout