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

95

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

Jase Whatson
źródło

Odpowiedzi:

169

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.

Alex
źródło
37
Chciałbym zrozumieć logikę, dlaczego przepełnienie: ukryte działa w tym przypadku.
masteroleary
2
Tak, miałem nadzieję, że nie tylko ja uważałem, że jest to sprzeczne z intuicją. Alex?
regularmike
3
@masteroleary @regularmike HTML/CSSnigdy nie była dobrą technologią UI, więc sprzeczne z intuicją rzeczy w niej są dość powszechne :)
Yuriy Nakonechnyy
2
@masteroleary Zdaję sobie sprawę, że to stary wątek, ale ostatnio próbowałem odpowiedzieć na podobne pytanie na stackoverflow.com/questions/21041297#21041625 - mam nadzieję, że to pomoże
xec
1
+1 za floatrozwiązanie. Działa bardzo dobrze, gdy inne zawodzą, zwłaszcza w połączeniu z Twitter Bootstrap.
Fizzix
17

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

Lycana
źródło
Dlaczego zostałem obniżony? Działa i słusznie przyznałem, że nie było to ładne rozwiązanie.
Lycana
1
Nie jestem pewien, dałbym +1, aby przywrócić przynajmniej 0. Być może zostałeś odrzucony, ponieważ nie poprawiłeś jego nieprawidłowego CSS ... tj. Użycie znaku równości do ustawienia właściwości CSS jest nieprawidłowe.
Alex
Słusznie. Doceniam +1 alex. Myślałem, że to moje oświadczenie było uczciwe.
Lycana
To rozwiązanie jest lepsze IMO. Przyjąłbym tę odpowiedź, gdyby to było moje pytanie.
ksg91,
8

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.

DarkWulf
źródło
ukryte działa, ale masz rację, auto działa trochę lepiej. Dzięki.
Matt Setter
7

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

Jest naprawdę czystszy.

Nande
źródło
zewnętrzny wyświetlacz użycia div: tabela; a wewnątrz div użyj wyświetlania: tabela-komórka;
Anukul Limpanasil
4

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

Garrett
źródło
3

Użyj jQuery:

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

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
Harpal
źródło
3
Przesada, kiedy możesz to zrobić za pomocą samego CSS.
Alex
1
Z moją odpowiedzią możesz ustawić wysokość rodzica taką samą jak wzrost dziecka, ale używając przepełnienia nie zmieniamy wysokości rodzica, co spowoduje pewien problem, jeśli wyświetlamy dane po div.
Harpal
1

Posługiwać się clear: both;

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

Ronan
źródło