2

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

2 回答 2

2

从W3开始：

浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。

您可能对jQuery masonry 插件感兴趣。

于 2012-05-17T20:51:53.210 回答
0

如果您能够稍微更改 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>​​​
于 2012-05-17T21:47:31.380 回答