Lassen Sie das äußere div automatisch die gleiche Höhe wie sein schwebender Inhalt haben

Ich will das Äußere div, das schwarz ist, um es einzuwickeln divschwebt darin. möchte ich nicht verwenden style="height: 200px in dem div mit dem outerdiv id, da ich möchte, dass es automatisch die Höhe seines Inhalts hat (z. B. die 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 die einstellen outerdiv‘s CSS dazu

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

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

Das Problem ist, dass Container nicht natürlich erweitert werden, um schwebende 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, aber dies wird Bildlaufleisten aufrufen, wenn irgendein Element außerhalb erscheint.

Sie können auch versuchen, den übergeordneten Container zu schweben, aber je nach Ihrem Design kann dies unmöglich/schwierig sein.

Erstens empfehle ich dringend, dass Sie Ihr CSS-Styling in einer externen CSS-Datei erstellen, anstatt es inline zu tun. Es ist viel einfacher zu warten und kann mithilfe von Klassen besser wiederverwendet werden.

Wenn Sie Alex ‘Antwort (& Garrets Clearfix) “Hinzufügen eines Elements am Ende mit clear: both” abarbeiten, können Sie es so machen:

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

Das funktioniert (aber wie Sie sehen können, ist Inline-CSS nicht so schön).

Vielleicht möchten Sie selbstschließende Schwimmer ausprobieren, wie auf beschrieben http://www.sitepoint.com/simple-clearing-of-floats/

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

Ich weiß, manche Leute werden mich hassen, aber ich habe es gefunden display:table-cell in diesen Fällen zu helfen.

Es ist wirklich sauberer.

Zunächst einmal verwenden Sie nicht width=300px das ist eine Attributeinstellung für das Tag, nicht CSS, verwenden width: 300px; stattdessen.

Ich würde vorschlagen, die anzuwenden clearfix Technik auf der #outerdiv. Klarfix ist eine allgemeine Lösung zum Löschen von 2 Floating-Divs, sodass das übergeordnete Div erweitert wird, um die 2 Floating-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 Ihrer Situation und was Clearfix tut, um sie zu lösen.

Verwenden Sie jQuery:

Höhe des übergeordneten Elements = offsetHeight des untergeordneten Elements festlegen.

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

Benutzen clear: both;

Ich habe über eine Woche damit verbracht, das herauszufinden!