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>
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 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
source d'informationauteur DanielEli
Vous devez vous connecter pour publier un commentaire.
Essayez d'utiliser jQuery Maçonnerie. Il pourrait être d'une grande correction pour cela.
http://masonry.desandro.com/
Ou essayer d'Isotopes, ce qui a de bien meilleures performances
http://isotope.metafizzy.co/
Si vous voulez les divs à pile à la verticale de tous les agents de navigateur, vous aurez besoin d'envelopper chaque "section" dans un contenant de l'élément. Voici un exemple de ce que je veux dire.
le css
le balisage
Autant que le septième div que vous avez, je dirais rendant étendre sur l'ensemble du site-conteneur. Il est esthétiquement agréable 🙂
Vous devriez essayer de placer chaque colonne de la division dans son propre conteneur, et les faire flotter à gauche. Par exemple:
etc, etc.
chaque colonne de chars à gauche l'un contre l'autre, et chaque article dans les colonnes des flux verticalement assez bien... en voici un exemple: http://jsfiddle.net/V6z8F/
Récemment, je l'ai fait pour mon projet.
Ajouter le code CSS de la classe parent:
Exemple:
Deux alternatives à la Maçonnerie qui travaillent très bien:
Salvattore (CSS): http://salvattore.com/
Isotope: http://isotope.metafizzy.co/index.html