我在浮动div上遇到了问题。在寻找答案时，大多数问题是如何实现我得到的效果，而不是如何实现我想要的效果。基本上，我正在浮动div 来创建 3 列，所需的结果是第四个div，它应该在第一个div 正下方的第 1 列中，从第三个浮动div 以高度结束的地方开始，而不是在其正上方的位置，第一个div，结束。最新 chrome 中的以下代码演示了我不想要的内容。
我得到的效果就像我期望的那样清晰：左; 如果应用于第四个浮动div，则表现良好。
下面的代码仅适用于 3 * 400px 小于屏幕宽度但 4 * 400 大于屏幕宽度的分辨率。
这张图片显示了正在发生的事情，我想要第四个div，我用箭头而不是它的位置：http://img687.imageshack.us/img687/2613/desired.png
<html>
<head>
<style>
.div1
{
float: left;
background-color: black;
height: 100px;
width: 400px;
}
.div2
{
background-color: red;
height: 200px;
width: 400px;
float: left;
}
.div3
{
float: left;
background-color: blue;
height: 500px;
width: 400px;
}
.div4
{
background-color: green;
float: left;
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
从 W3
：浮动框的外顶部不得高于前面的元素生成的任何块或浮动框的外部顶部 源文档。
你可能对jQuery砌体插件感兴趣。
如果你能够稍微改变 HTML，那么你可以将div1 和div4 组合在一起：
<html>
<head>
<style>
.group1 {
float: left;
}
.div1
{
float: left;
background-color: black;
height: 100px;
width: 400px;
}
.div2
{
background-color: red;
height: 200px;
width: 400px;
float: left;
}
.div3
{
float: left;
background-color: blue;
height: 500px;
width: 400px;
}
.div4
{
clear: both;
background-color: green;
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="group1">
<div class="div1"></div>
<div class="div4"></div>
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>