CSS div conteneur de ne pas obtenir de hauteur
Je veux que mon div conteneur pour obtenir la hauteur de max de ses enfants de hauteur. sans savoir ce que la hauteur de l'enfant div
s vont avoir. J'ai essayé sur JSFiddle. Le conteneur div
est sur le rouge. qui ne s'affiche pas. Pourquoi?
Vous devez vous connecter pour publier un commentaire.
Ajouter la propriété suivante:
Cela va forcer le conteneur afin de respecter la hauteur de tous les éléments à l'intérieur de celui-ci, indépendamment des éléments flottants.
http://jsfiddle.net/gtdfY/3/
Mise à JOUR
Récemment, je travaillais sur un projet nécessitant de ce truc, mais nécessaire pour permettre à débordement à l'exposition, ainsi au lieu de cela, vous pouvez utiliser un pseudo-élément pour effacer votre flotte, de manière efficace d'atteindre le même effet tout en permettant à débordement sur tous les éléments.
http://jsfiddle.net/gtdfY/368/
Vous flottez les enfants qui signifie qu'ils "flottent" dans l'avant du conteneur.
Afin de prendre la bonne hauteur, vous devez vider le flotteur
La div style="clear: both" efface le flottant un donne la bonne hauteur pour le conteneur. voir http://css.maxdesign.com.au/floatutorial/clear.htm pour plus d'info sur les flotteurs.
par exemple.
Il n'est pas plus facile?
Essayez d'insérer cette compensation div avant le dernier
</div>
<div style="clear: both; line-height: 0;"> </div>
Le meilleur et le plus à l'épreuve des balles solution est d'ajouter
::before
et::after
pseudoelements pour le conteneur. Donc, si vous avez par exemple une liste comme:Et tous les éléments de la liste a
float:left
de la propriété, alors vous devriez ajouter à votre css:Ou vous pouvez essayer
display:inline-block;
de la propriété, alors vous n'avez pas besoin d'ajouter de clearfix.