Faire en sorte que la division externe ait automatiquement la même hauteur que son contenu flottant

Question

Je veux que les div extérieurs, qui sont en noir, enveloppent leur div s flottant à l'intérieur. Je ne veux pas utiliser style='height: 200px en div avec le outerdiv id que je veux que ce soit automatiquement la hauteur de son contenu (par exemple, le flottant div s).

 <div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
 

Comment y parvenir?

Answer 1

Vous pouvez définir l' outerdivs'CSS de cette

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

Vous pouvez aussi le faire par l'ajout d'un élément à la fin avec l' clear: both. Ceci peut être ajouté normalement, avec JS (pas une bonne solution) ou avec :after CSS pseudo-élément (pas largement pris en charge dans les anciens S).

Le problème est que les conteneurs ne seront pas naturellement s'étendre pour inclure flottait enfants. Soyez averti avec l'aide de la première exemple, si vous avez des enfants des éléments à l'extérieur de l'élément parent, ils seront cachés. Vous pouvez également utiliser "auto" comme valeur de la propriété, mais cela va appeler les barres de défilement si un élément apparaît à l'extérieur.

Vous pouvez également essayer flottant le conteneur parent, mais en fonction de votre conception, cela peut être impossible/difficile.

Answer 2

Tout d'abord, je vous recommande vivement 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 (& clearfix de Garret) de "l'ajout d'un élément à la fin avec clear: both", vous pouvez le faire comme suit:

     <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>
 

Cela fonctionne (mais comme vous pouvez le constater, les CSS en ligne ne sont pas si jolies).

Answer 3

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

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

Answer 4

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

C'est vraiment plus propre.

Answer 5

Tout d'abord, vous n'avez pas utiliser width=300px c'est un attribut de paramètre de la balise, pas de CSS, utilisez width: 300px; à la place.

Je suggère l'application de l' clearfix technique sur l' #outerdiv. Clearfix est une solution générale pour effacer les 2 divs flottantes de sorte que le div parent peut s'adapter à l'2 divs flottantes.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

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