Comment obtenir différents divs hauteur html pour flotter

J'ai une série de créé dynamiquement les divs de différentes hauteurs dans un div conteneur.

<div id="container">
  <div id='d1'>Varying text...</div>
  <div id='d2'>Varying text...</div>
  <div id='d3'>Varying text...</div>
  <div id='d4'>Varying text...</div>
  <div id='d5'>Varying text...</div>
  <div id='d6'>Varying text...</div>
  <div id='d7'>Varying text...</div>
</div>

Comment obtenir différents divs hauteur html pour flotter

Quand je "float: left" les divs envelopper comme prévu en laissant un espace blanc entre la plus courte de la vrd et de la ligne suivante de divs.

Comment obtenir différents divs hauteur html pour flotter

Comment aurais-je obtenir les divs efficacement "float: up", de l'emballage veritcally plutôt que horizonatally. En utilisant uniquement css.

Idéalement, point 2, sous le point 1, mais toute amélioration de l'aide.

Qu'elle finirait par ressembler à ce

Comment obtenir différents divs hauteur html pour flotter

source d'informationauteur DanielEli