Faire que la div externe soit automatiquement à la même hauteur que son contenu flottant

Je veux que le div externe, qui est noir, enveloppe ses div flottant. Je ne veux pas utiliser style='height: 200px dans le div avec l’identifiant de outerdiv car je souhaite qu’il soit automatiquement à la hauteur de son contenu (par exemple, les div flottantes).

 

Comment y parvenir?

Vous pouvez définir le outerdiv la outerdiv

 #outerdiv { overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ } 

Vous pouvez également le faire en ajoutant un élément à la fin avec clear: both . Cela peut être ajouté normalement, avec JS (pas une bonne solution) ou avec :after pseudo élément CSS (pas largement supporté dans les anciens IE).

Le problème est que les conteneurs ne s’étendent pas naturellement pour inclure les enfants flottants. Soyez averti en utilisant le premier exemple, si vous avez des éléments enfants en dehors de l’élément parent, ils seront masqués. Vous pouvez également utiliser “auto” comme valeur de propriété, mais cela invoquera des barres de défilement si un élément apparaît à l’extérieur.

Vous pouvez également essayer de faire flotter le conteneur parent, mais selon votre conception, cela peut être impossible / difficile.

Tout d’abord, je vous recommande fortement de faire votre style CSS dans un fichier CSS externe, plutôt que de le faire en ligne. C’est beaucoup plus facile à maintenir et peut être plus réutilisable en utilisant des classes.

En travaillant sur la réponse d’Alex (et le correctif de Garret) de “l’ajout d’un élément à la fin avec clear: both”, vous pouvez le faire comme suit:

  

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

zzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Cela fonctionne (mais comme vous pouvez le voir, le CSS en ligne n’est pas si joli).

Vous pouvez essayer des flotteurs à fermeture automatique, comme détaillé sur http://www.sitepoint.com/simple-clearing-of-floats/

Alors essayez peut-être soit le overflow: auto (fonctionne habituellement), soit le overflow: hidden , comme dit alex.

Je sais que certaines personnes vont me détester, mais j’ai trouvé display:table-cell pour vous aider dans ce cas.

C’est vraiment plus propre.

Tout d’abord, vous n’utilisez pas width=300px , un paramètre d’atsortingbut pour la balise non CSS, utilisez width: 300px; au lieu.

Je suggère d’appliquer la technique de clearfix sur le #outerdiv . Clearfix est une solution générale pour effacer 2 divs flottants afin que le div parent se développe pour accueillir les 2 divs flottants.

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

zzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Voici un exemple de votre situation et de ce que Clearfix fait pour le résoudre.

Utilisez jQuery:

Set Parent Height = Child offsetHeight.

 $(document).ready(function() { $(parent).css("height", $(child).attr("offsetHeight")); } 

Utilisez clear: both;

J’ai passé plus d’une semaine à essayer de comprendre cela!