Effacer le dernier élément flottant en utilisant CSS?

J'ai une collection de divs flottants dans un autre div. Les divs enfants ont des largeurs et des hauteurs variables, c'est-à-dire qu'ils sont remplis à l'aide de données dynamiques dont je n'ai aucun contrôle. Maintenant, parfois, que se passe-t-il si le dernier enfant div a une taille massive avec un mur de texte parce qu'il est forcé dans une petite largeur par les autres divs. Cela se produit uniquement dans IE 6, 7, 8 - FF3.6 le gère correctement - il s'assure que l'énorme div commence après un saut de ligne avec une grande largeur.Effacer le dernier élément flottant en utilisant CSS?

Y at-il de toute façon je peux forcer IE dans le même comportement?

Source

2010-11-25 Gaurav Dadhania

Pouvez-vous essayer de reproduire l'erreur? Empiler plusieurs flotteurs de hauteurs différentes est généralement une recette pour le chaos, il est donc difficile de dire exactement ce que vous rencontrez. Si vous publiez votre code, nous pouvons le reproduire et expliquer pourquoi IE l'affiche comme il est. –

En fait, si vous spécifiez une largeur pour ce div float, alors il utilisera cette largeur, ou bien la div float va "rétrécir" au contenu. Ainsi, vous pouvez essayer, ou vous pouvez utiliser ce style pour qui flottent:

#the-last-div { clear: both; float: left }

vous pouvez ou ne voulez pas flotta si vous voulez qu'il soit sur la page par lui-même.

Source

2010-11-25 03:43:49

Je ne sais pas quel div va finir par être le dernier div. Chaque div a un contenu dynamique qui y arrive. Il y a des divs qui peuvent ne pas avoir de contenu. –

Alors souhaitez-vous spécifier une largeur pour eux, comme 300px ou quelque chose comme ça? Sinon, c'est normal si le dernier div flottant à droite est 60px parce que c'est ce qui reste sur la page, et s'il y a 300 mots à l'intérieur, alors il apparaîtra trop grand et bizarre. –

vous pouvez aussi essayer 'min-width', bien que le support d'IE 7 soit buggé: http://reference.sitepoint.com/css/min-width –

La seule solution à ceci est l'une des trois: spécifiez clear: both; spécifiez une largeur par défaut, ou effectuez l'une ou les deux dynamiquement avec jquery/javascript. Tant que vous laissez le contenu décider de la hauteur et de la largeur, vous allez rencontrer des problèmes.

Utilisation de clear: both; sur tous les divs mettra chaque flotteur sur sa propre ligne. Cela ne ressemble pas à ce que vous voulez.

La spécification d'une largeur sera la plus prévisible. Le navigateur respecte la largeur et efface à la ligne suivante s'il n'y a pas assez d'espace.

Si vous chargez dynamiquement du contenu qui nécessite une largeur spécifique, il convient d'ajuster de manière dynamique la largeur div divisée de façon appropriée. Vous pouvez peut-être vérifier la longueur du contenu et affecter une largeur à la div recevant le contenu si le contenu est trop long. Puisque nous n'avons pas votre code, vous devrez expérimenter avec la longueur et la largeur pour bien faire les choses.

Le contenu que vous chargez contient-il du texte simple ou contient-il des éléments div et d'autres éléments de niveau bloc? Comment ça flotte? est-ce un mélange de float: left; et flotter: droit; ? ou est-ce tout à un côté?

Source

2010-11-25 04:33:27 Metagrapher

Effacer le dernier élément flottant en utilisant CSS?

Répondre

Questions connexes