Wie können Boxen unterschiedlicher Größe miteinander verbunden werden und den verfügbaren Platz ausfüllen (reaktionsschnelle Lösung erforderlich)?

Question

Mit flex

.container { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 

.box { 
    width: 46%; 
    flex-grow: 1; 
} 

bekommt das nächste Bild:

Mit Floating

.container { 
    overflow: hidden; 
} 

.box { 
    display: inline-block; 
    float: left; 
} 

wird mir das nächste Bild:

Die Aufgabe erfordert, dass es zwischen den Boxen keine vertikalen Abstände geben würde (wie in der ersten Spalte mit flexbox oder in der zweiten Spalte mit floating), so dass die Boxen ineinander fließen und den gesamten verfügbaren Platz ausfüllen. Kästchenbreiten sind gleich, aber die Schachtelhöhen sind unterschiedlich. Sollte reaktionsfähig sein, so werden die zwei Spalten in eine Spalte umgewandelt, wenn das Ansichtsfenster verkleinert wird. Schätzen Sie jede Hilfe oder Hinweise.

UPDATE: Ich würde gerne erklären, warum die Lösung here (Frage, für die als Duplikat markiert ist) nicht funktioniert form mir - in dieser Frage sind die Elemente etwa gleich, sie sind ziemlich homogen, so dass sie können ungefähr berechnet werden, wie viel Artikel in welche Spalte passt. In meinem Beispiel können Elemente sehr unterschiedliche Größen haben, wenn also 2 (zum Beispiel) Spalten erstellt werden, ist es nicht klar, hot HTML-Layout zu setzen, wie viele divs geht in welche Spalte, so zum Beispiel, "Header 1" -Box kann die gleiche Höhe wie 2-5 zusammen - und ihre Höhe ist dynamisch.

Answer 1

Sie können column-width -Eigenschaft (CSS-Spalten) verwenden, obwohl Sie möglicherweise die Browser-Unterstützung für diese Funktion überprüfen müssen.

Hier ist die documentation.

Hier ist ein fiddle für die gleiche.