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.
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.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser la bibliothèque populaire Maçonnerie.
Voici un code exemple...
Voici la source sur les Github et d'un entretien avec David Desandro sur le Shoptalk podcast.
Pour les gens qui ne sont pas à l'aide de jQuery, notez qu'il est également La Vanille De Maçonnerie qui est le cadre de référence-version gratuite.
Astuce: assurez-vous que le conteneur parent a position:relative, de sorte que tout le contenu est lié à votre conteneur.
Puisque vous êtes déjà à l'aide de jquery, jquery maçonnerie pourrait vous intéresser: http://masonry.desandro.com
Bien, si vous ne visent qu'à l'appui de la plupart des navigateur moderne, le CSS3 multi-colonnes de mise en page pourrait aider. Un problème avec cette approche est qu'elle ne gardera pas le même ordre, mais vous pouvez jouer avec l'ordre dans le code HTML (ou Javascript).
J'ai ajouté un conteneur autour de votre travées appelé
#container
.jsFiddle Démo