2 votes

CSS "élimination" sélective des flottants

J'ai une série de blocs que je fais flotter à gauche. Leur hauteur varie; certains sont courts, d'autres sont longs.

Maintenant, ces blocs sont générés de manière dynamique, donc on ne peut pas prédire la hauteur de chaque bloc (ou leur nombre). Il faut être flexible, donc si tous ces blocs ne rentrent pas sur une seule ligne, j'ai besoin d'une deuxième ligne.

Problème : étant donné que les blocs ont des hauteurs variables, tout bloc qui déborde sur la ligne suivante se "casse" parmi les flottants existants : image

J'ai besoin que les blocs débordants forment leur propre ligne : image

Je sais que c'est un comportement correct (les flottants favorisant les positions plus hautes par rapport aux positions plus à gauche), mais quelle est la meilleure solution pour cela ? Je peux changer la structure HTML (et évidemment le CSS), mais je ne peux pas coder en dur un clear: left.

Voici un jsFiddle.

7voto

Utilisez display: inline-block sur les blocs; sauvegardez float pour les situations où vous avez réellement besoin d'envelopper du texte autour d'un élément.

Résultats: http://jsfiddle.net/EQyVy/18/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X