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

Je veux que l'extérieur div, qui est noir, enveloppe ses divs flottant à l'intérieur. Je ne veux pas utiliser style='height: 200pxdans divavec l' outerdividentifiant car je veux qu'il soit automatiquement à la hauteur de son contenu (par exemple, les flottants div).

<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?

Vous pouvez définir le outerdivCSS de sur ceci

#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 un :afterpseudo élément CSS (pas largement pris en charge dans les IE plus anciens).

Le problème est que les conteneurs ne se développeront pas naturellement pour inclure des 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 en fonction de 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 clearfix de Garret) "ajouter un élément à la fin avec clear: both", vous pouvez le faire comme ceci:

    <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 voir, le CSS en ligne n'est pas si joli).

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

Alors peut-être essayez soit overflow: auto(fonctionne généralement), soit overflow: hidden, comme l'a dit Alex.

Je sais que certaines personnes me détesteront, mais j'ai trouvé display:table-cellde l'aide dans ce cas.

C'est vraiment plus propre.

Tout d'abord, vous n'utilisez pas width=300pxce paramètre d'attribut pour la balise et non CSS, utilisez width: 300px;plutôt.

Je suggérerais d'appliquer la clearfixtechnique sur le #outerdiv. Clearfix est une solution générale pour effacer 2 div flottants afin que le div parent se développe pour accueillir les 2 div flottants.

<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 ce que Clearfix fait pour la résoudre.

Utilisez jQuery:

Définissez Parent Height = Child offsetHeight.

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

Utilisation clear: both;

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