Floated divs acting like a clear: left angewendet

Question

Ich habe ein Problem mit floated divs. Bei der Suche nach einer Antwort waren die meisten Fragen, wie man den Effekt erzielt, den ich bekomme, anstatt wie man das erreicht, was ich möchte. Im Grunde floate ich divs, um 3 Spalten zu erstellen, und das gewünschte Ergebnis ist das vierte div, das in Spalte 1 direkt unter dem ersten div beginnen soll, wo das dritte floated div in der Höhe endet, anstatt wo das direkt darüber liegende div, das erste div, endet. Der folgende Code im neuesten Chrome zeigt, was ich nicht möchte.

Der Effekt, den ich erhalte, ist so, wie ich erwarten würde, wenn clear: left; auf das vierte floated div angewendet wird.

Der folgende Code funktioniert nur bei einer Auflösung, bei der 3 * 400px kleiner als die Bildschirmbreite ist, aber 4 * 400 größer als die Bildschirmbreite.

Dieses Bild zeigt, was passiert, ich möchte das vierte div dort haben, wo ich es mit einem Pfeil gezeigt habe, anstelle von wo es sich befindet: http://img687.imageshack.us/img687/2613/desired.png

        .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;
        }

Answer 1

Von der W3:

Das äußere obere Ende einer schwebenden Box darf nicht höher sein als das äußere obere Ende einer beliebigen block- oder schwebenden Box, die von einem Element im vorherigen Teil des Quelldokuments erstellt wurde.

Sie könnten am jQuery Mauerwerk-Plugin interessiert sein.

Answer 2

Wenn Sie den HTML-Code leicht ändern können, könnten Sie div1 und div4 zusammenfassen:

        .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;
        }