浮动div和不需要的空间

Question

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

(1)top left div - (2)div - (3)top right div
(6)bottom left div - (4)div - (5)bottom right 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上设置一个固定的高度，以防止更长的一个伸出并弄乱布局。

Answer 2

如果您正在寻找的是这些漂浮的div完美地填满所有空间，那么如果没有一些奇怪的话就不会发生这种情况。当一个div高于其他div时，其余的项目将不再全部触及。它正如预期的那样发生：一旦一系列浮动击中文档的右侧，下一个浮动项目将出现在左侧下方下一行的浮动内容中。强制浮动在第三行，所以它似乎是第二行的一部分是可能的，但不会很好地处理各种屏幕尺寸......

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

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

Answer 3

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