CSS: Forcer float à faire une nouvelle ligne

Question

J'ai un tas d' float: left éléments et certains sont un peu plus grands que d'autres. Je veux que le saut de ligne à la pause et les images flottent tout le chemin à gauche au lieu de rester bloqué sur un plus grand élément.

Voici la page que je suis en train de parler : http://www.stdicon.com/gartoon/

Si elles sont toutes de la même taille si fonctionne à merveille : http://www.stdicon.com/crystal/

Merci! (Je préfère ne pas entrer dans le javascript ou des scripts côté serveur si je n'ai pas d')

Answer 1

Eh bien, vous avez deux options:

1. Utilisez clear: left sur les éléments les plus à gauche - le problème est que vous aurez un nombre fixe de colonnes
2. Rendre les éléments égaux en height - soit par script ou en codant en dur la hauteur dans le CSS

Les deux limitent - c'est donc votre appel.

Answer 2

Je l'ai corrigé en supprimant float:left et en ajoutant display:inline-block place. Je ne l'ai pas utilisé pour les images, mais devrait bien fonctionner, là aussi.

Answer 3

Utilisez display:inline-block

Vous pouvez également trouver vertical-align: top ou vertical-align:middle utile.

Answer 4

Vous pouvez les envelopper dans un div et lui donner une largeur définie (la largeur de l'image la plus large + une marge peut-être?), Puis faire flotter les div. Ensuite, définissez les images au centre de leurs divs contenant. Vos marges entre les images ne seront pas cohérentes pour les images de tailles différentes, mais elles seront beaucoup plus jolies sur la page.

Answer 5

Ajouter à .icons div {width: 160px; height: 130px;} fonctionnera très bien

J'espère que ça va aider