Spraw, aby zewnętrzny element div miał automatycznie taką samą wysokość, jak jego pływająca zawartość

Chcę, aby zewnętrzna strona div, która jest czarna, owinęła się divw niej. Nie chcę używać style='height: 200pxw divz outerdivid, ponieważ chcę, aby była automatycznie wysokością jego zawartości (np. Pływające 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>

Jak to osiągnąć?

Możesz ustawić outerdivCSS na to

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

Możesz to również zrobić, dodając element na końcu clear: both. Można to dodać normalnie, za pomocą JS (nie jest to dobre rozwiązanie) lub :afterpseudoelementu CSS (nie jest szeroko obsługiwany w starszych IE).

Problem polega na tym, że kontenery nie rozszerzają się naturalnie, aby objąć pływające dzieci. Ostrzegamy przed użyciem pierwszego przykładu, jeśli masz jakieś elementy podrzędne poza elementem nadrzędnym, zostaną one ukryte. Możesz również użyć „auto” jako wartości właściwości, ale spowoduje to wywołanie pasków przewijania, jeśli jakikolwiek element pojawi się na zewnątrz.

Możesz również spróbować unosić kontener nadrzędny, ale w zależności od projektu może to być niemożliwe / trudne.

Po pierwsze, bardzo polecam tworzenie stylów CSS w zewnętrznym pliku CSS, zamiast robienia tego w tekście. Jest znacznie łatwiejszy w utrzymaniu i może być bardziej wielokrotnego użytku przy użyciu klas.

Opracowując odpowiedź Alexa (i poprawkę Garreta) dotyczącą „dodawania elementu na końcu z clear: both”, możesz to zrobić w następujący sposób:

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

To działa (ale jak widać, wbudowany CSS nie jest taki ładny).

Możesz spróbować samozamykających się pływaków, jak opisano szczegółowo na stronie http://www.sitepoint.com/simple-clearing-of-floats/

Więc może spróbuj albo overflow: auto(zwykle działa), albo overflow: hidden, jak powiedział Alex.

Wiem, że niektórzy będą mnie nienawidzić, ale display:table-cellw takich przypadkach znalazłem pomoc.

Jest naprawdę czystszy.

Przede wszystkim nie używasz width=300pxtego ustawienia atrybutu dla tagu, a nie CSS, użyj width: 300px;zamiast tego.

Sugerowałbym zastosowanie tej clearfixtechniki na #outerdiv. Clearfix to ogólne rozwiązanie umożliwiające wyczyszczenie 2 pływających elementów DIV, dzięki czemu nadrzędny element DIV rozszerzy się, aby pomieścić 2 pływające elementy DIV.

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

Oto przykład Twojej sytuacji i tego, co robi Clearfix, aby ją rozwiązać.

Użyj jQuery:

Ustaw wysokość nadrzędną = odsunięcie podrzędne Wysokość.

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

Posługiwać się clear: both;

Spędziłem ponad tydzień, próbując to rozgryźć!