我遇到了 float div 的问题。在寻找答案时，大多数问题是如何达到我想要的效果，而不是如何达到我想要的效果。基本上，我正在 float div 创建 3 列，所需的结果是第四个 div，它应该位于第一个 div 正下方的第 1 列中，从第三个 float div 的高度结束位置开始，而不是直接在其上方的那个 div 的位置，第一个div，结束。最新 chrome 中的下面的代码演示了我不想要的内容。
我得到的效果就像我预期的那样清楚:left;应用于第四个 float 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 :
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
您可能对 jQuery masonry plugin 感兴趣.
关于html - float div 的行为就像透明的 : left applied，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10643012/