css float éléments avec d'inégales hauteurs gauche et vers le haut dans la grille

Je me demande comment je peux faire de l'effet dans la figure 1.

css float éléments avec d'inégales hauteurs gauche et vers le haut dans la grille

Ce que j'ai obtenu jusqu'à présent est


.box { display: inline-block; vertical-align: top; width: 100px;}

Cela me donne le résultat illustré à la figure 2.
(Avis: je suis conscient que je peux faire la même chose avec float: left)

Mon code HTML ressemble à quelque chose comme ceci:

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

Je veux que chaque élément d'être lancée vers la gauche aussi loin que possible, mais en attendant, flottant vers le haut.

Est-il possible de faire cela avec de la pure css, ou ai-je besoin d'un peu de javascript?

EDIT:

Il est important pour moi que l'ensemble de la grille est placée au centre de la page. C'est pourquoi je utiliser display:inline-block. La grille ne doit pas être fixé à la page parce que je veux un reflow quand je redimensionner ma fenêtre.

  • Puisque vous êtes déjà à l'aide de jquery jquery maçonnerie pourrait vous intéresser: masonry.desandro.com
  • génial. Je suis en train de l'essayer maintenant. Pourriez-vous poster cela comme une réponse, donc je ne peux l'accepter si ça marche 😉
  • Hm, je suis sûr que cela peut être réalisé avec des css seul.
  • pourriez-vous me dire comment?
  • Souhaitez-vous toujours 3 colonnes? Pouvez-vous ajouter plus de balisage?
  • Fait à....
  • eh bien, j'ai juste joué un peu, et il semble, à l'effet de la figure (1) ne peut pas être réalisé directement avec straingt css.

InformationsquelleAutor Jules Colle | 2012-07-11