css - float div 和不需要的空间

Question

我有几个 float 的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 |

你的第二排 float 漂浮在第一个 div 的右侧，你说它更长。有几种解决方案:

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