Un puzzle de divs

Bonjour à Tous,

Une boucle php m'affiche des divs dont j'ignore la taille du contenu en hauteur.
Le dit contenu est une liste.
J'ai fait :

Code:

---

1 2 3 4 5 6

$ligne = '<div style="width:99%;margin-left:auto;margin-right:auto">'; foreach($tab_mod as $id_mod){ $ligne .= '<div style="float:left;margin:5px;display:block"><ul id="myDiv'.$i.'""></ul></div>'; $i++; } $ligne .= '</div>';

---

Tous les hauts des blocs sont alignés, mais selon la hauteur, il y a des blancs en dessous.
Je souhaiterais qu'ils soient collés comme un puzzle en hauteur et largeur avec une marge fixe entre les blocs.
Je sèche lamentablement.

Bonjour,

Si tu ne connais ni la hauteur maximum, ni le nombre de divs par ligne (en responsive) je vois pas.
Une solution intermédiaire est de définir une hauteur qui couvre 80 à 90% des cas et mettre un overflow-y: auto;

Bonjour, non, en effet, je ne sais pas la hauteur des divs : ils peuvent faire 50 comme 300px...

Perso, à part la solution dégradée proposée (overflow-y:auto), je vois pas de solution uniquement avec les styles.
La solution peut être un fonction javascript qui réaligne la hauteur une fois les éléments dans le DOM.
Et qui serait appeler également au changement de la taille de fenêtre si tu veux que se soit responsive.

Bonjour,

• voir en CSS : columns
• exemple : http://codepen.io/jreaux62/pen/WvXrLb

Bonsoir,

Excellent. Merci !
Bonne soirée.