Chcę, aby zewnętrzna strona div
, która jest czarna, owinęła się div
w niej. Nie chcę używać style='height: 200px
w div
z outerdiv
id, ponieważ chcę, aby była automatycznie wysokością jego zawartości (np. Pływające div
s).
<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ąć?
HTML/CSS
nigdy nie była dobrą technologią UI, więc sprzeczne z intuicją rzeczy w niej są dość powszechne :)float
rozwiązanie. Działa bardzo dobrze, gdy inne zawodzą, zwłaszcza w połączeniu z Twitter Bootstrap.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).
źródło
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), albooverflow: hidden
, jak powiedział Alex.źródło
Wiem, że niektórzy będą mnie nienawidzić, ale
display:table-cell
w takich przypadkach znalazłem pomoc.Jest naprawdę czystszy.
źródło
Przede wszystkim nie używasz
width=300px
tego ustawienia atrybutu dla tagu, a nie CSS, użyjwidth: 300px;
zamiast tego.Sugerowałbym zastosowanie tej
clearfix
techniki 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ć.
źródło
Użyj jQuery:
Ustaw wysokość nadrzędną = odsunięcie podrzędne Wysokość.
$(document).ready(function() { $(parent).css("height", $(child).attr("offsetHeight")); }
źródło
Posługiwać się
clear: both;
Spędziłem ponad tydzień, próbując to rozgryźć!
źródło