Comment faire en sorte que les boîtes de différentes tailles flottent les unes sur les autres et remplissent l'espace disponible (solution adaptée requise)?

Question

Utiliser flex

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

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

obtient l'image suivante:

aide flottante

.container { 
    overflow: hidden; 
} 

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

moi obtient l'image suivante:

La tâche requiert qu'il n'y ait pas d'espaces verticaux entre les cases (comme c'est dans la première colonne avec flexbox ou dans la deuxième colonne avec flottant), donc les boîtes flottent les unes aux autres en remplissant TOUT espace disponible. Les largeurs des boîtes sont les mêmes, mais les hauteurs des boîtes diffèrent. Devrait être réactif, de sorte que les 2 colonnes entrent dans une quand la fenêtre rétrécit. Appréciez toute aide ou conseil.

MISE À JOUR: Je voudrais expliquer pourquoi la solution here (question pour laquelle est marqué comme doublon) ne fonctionne pas de moi - dans cette question, les éléments sont à peu près les mêmes, ils sont assez homogènes, de sorte qu'ils peuvent être approximativement calculé combien d'articles vont dans quelle colonne. Dans mon exemple, les éléments peuvent être de tailles très différentes, donc si 2 colonnes (par exemple) sont créées, il n'est pas clair de mettre en page HTML, combien de divs vont dans quelle colonne, donc, par exemple, 'header 1' peut être la même hauteur que 2-5 ensemble - et leur hauteur est dynamique.

Answer 1

Vous pouvez utiliser la propriété column-width (colonnes CSS), mais vous devrez peut-être vérifier la prise en charge par le navigateur de cette fonctionnalité.

Voici le documentation. Il s'agit d'un fiddle pour le même.