Question

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

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

http://jsfiddle.net/fwsh8ov0/

Haven尚未对小屏幕进行任何配置。

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/的小提琴。它不会那么整洁，但我不知道你想要做些什么来使这篇文章更具体。

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

2 个答案: