浮动 div 和不需要的空间

Question

我有几个浮动 div，它们以图形方式排列（它们在代码中的层次结构由数字表示）：

(1)左上 div - (2)div - (3)右上 div
(6)左下div - (4)div - (5)右下div

当前所有 div 都在包装器中向左浮动。我遇到的问题是左下角的框低于应有的位置。我知道为什么;最后一个框在右下角的左侧浮动，因此它被推到了布局之外。我的问题是如何让 div 回到它所属的位置。

基本上 div 是这样输出的：

••• •• •

你还应该知道，左上的 div 比其他两个顶部的 div 高，左下的 div 比另外两个底部的行 div 短。

Answer 1

我假设您看到的是这样的框：

| 1 | 2 | 3 | | | 4 | 5 | | 6 |

您的第二行浮动浮动在第一个 div 的右侧，您说它更长。有几个解决方案：

1. 在该行的第一个 div 上添加 clear: left。
2. 将每一行包装在一个样式为clear: left 的 div 中。
3. 在 div 上设置一个固定高度，以防止较长的 div 伸出并弄乱布局。

Answer 2

如果您正在寻找的是让这些浮动 div 完美地填充所有空间，那么如果没有一些不稳定，这将不会发生。当一个 div 比其他 div 高时，其余项目将不再全部接触。正如预期的那样发生：一旦一系列浮动到达文档的右侧，下一个浮动项目将出现在左侧在上一行浮动的下方。在第三行强制浮动，使其看起来是第二行的一部分是可能的，但不能很好地处理各种屏幕尺寸......

如果你真的需要 3 列，为什么不创建 3 列，并在每列中浮动一个顶部和底部元素？然后一切都会按照您期望的方式堆叠。像这样的：

| 1 | 3 | 5 |
| 2 | 4 | 6 |

Answer 3

根据源顺序，您能够做到这一点的唯一方法是为第 6 个 div 的顶部指定一个负边距 - 如果您的所有高度都已测量并且应该完全适合，您可能会只需指定负边距的高度。