Stellen Sie sicher, dass das äußere Div automatisch die gleiche Höhe wie der schwebende Inhalt hat

Ich möchte, dass das Äußere div, das schwarz ist, darin divschwebt. Ich möchte nicht style='height: 200pxin der divmit der outerdivID verwenden, da ich möchte, dass es automatisch die Höhe seines Inhalts ist (z. B. das schwebende divs).

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

Wie erreicht man das?

Sie können das outerdivCSS des 'darauf einstellen

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

Sie können dies auch tun, indem Sie am Ende mit ein Element hinzufügen clear: both. Dies kann normalerweise mit JS (keine gute Lösung) oder mit :afterCSS-Pseudoelement (in älteren IEs nicht weit verbreitet ) hinzugefügt werden .

Das Problem ist, dass Container nicht auf natürliche Weise erweitert werden, um schwimmende Kinder einzuschließen. Seien Sie gewarnt, wenn Sie das erste Beispiel verwenden. Wenn Sie untergeordnete Elemente außerhalb des übergeordneten Elements haben, werden diese ausgeblendet. Sie können auch 'auto' als Eigenschaftswert verwenden. Dadurch werden jedoch Bildlaufleisten aufgerufen, wenn ein Element außerhalb angezeigt wird.

Sie können auch versuchen, den übergeordneten Container zu schweben. Abhängig von Ihrem Design kann dies jedoch unmöglich / schwierig sein.

Erstens empfehle ich Ihnen dringend, Ihr CSS-Styling in einer externen CSS-Datei durchzuführen, anstatt es inline zu machen. Es ist viel einfacher zu warten und kann mithilfe von Klassen wiederverwendbarer sein.

Wenn Sie Alex 'Antwort (& Garrets Clearfix) "Hinzufügen eines Elements am Ende mit clear: both" abarbeiten, können Sie dies folgendermaßen tun:

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

Dies funktioniert (aber wie Sie sehen können, ist Inline-CSS nicht so hübsch).

Möglicherweise möchten Sie selbstschließende Floats ausprobieren, wie unter http://www.sitepoint.com/simple-clearing-of-floats/ beschrieben.

Also versuchen Sie es vielleicht entweder overflow: auto(funktioniert normalerweise) oder overflow: hidden, wie Alex sagte.

Ich weiß, dass einige Leute mich hassen werden, aber ich habe festgestellt, dass ich display:table-cellin diesen Fällen helfen kann.

Es ist wirklich sauberer.

Zunächst verwenden Sie keine width=300pxAttributeinstellung für das Tag, nicht CSS. Verwenden Sie width: 300px;stattdessen.

Ich würde vorschlagen, die clearfixTechnik auf die anzuwenden #outerdiv. Clearfix ist eine allgemeine Lösung zum Löschen von 2 schwebenden Divs, sodass das übergeordnete Div erweitert wird, um die 2 schwebenden Divs aufzunehmen.

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

Hier ist ein Beispiel für Ihre Situation und wie Clearfix sie löst.

Verwenden Sie jQuery:

Set Parent Height = Child offsetHeight.

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

Verwenden clear: both;

Ich habe über eine Woche lang versucht, das herauszufinden!