Question

我遇到浮动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>

Answer 1

来自W3：

浮动框的外部顶部可能不会高于任何块的外部顶部或由前面的元素生成的浮动框。来源文件。

您可能对jQuery masonry plugin感兴趣。

Answer 2

如果您能稍微更改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>

漂浮的div表现得像一个清晰的：左应用

2 个答案: