Pytanie opakunkowe, gdy zawiera pływające divy

Chciałbym stworzyć, wyśrodkowany w przeglądarce, otoczony, wrapper, który autoexpands w wysokości wokół różnych elementów div. Gdy używasz pływaków, aby zachować elementy div w linii, opakowanie po prostu zatrzymuje się po pierwszym div. Bądź uprzejmy, to może być lub nie jest właściwy sposób, ale dlatego jestem tutaj.Pytanie opakunkowe, gdy zawiera pływające divy

Oto prosty przykład.

<head> 

<style type="text/css"> 
<!-- 
#wrapper { 
height: 100%; 
width: 800px; 
border: 1px solid #000; 
margin-right: auto; 
margin-left: auto; 
} 
#header { 
height: 100px; 
width: 800px; 
} 
#column1 { 
width: 300px; 
height: 400px; 
float: left; 
} 
#column2 { 
height: 400px; 
width: 300px; 
float: left; 
} 
#navbox { 
float: left; 
width: 200px; 
height: 400px; 
} 
--> 
</style> 

</head> 

<body> 

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

</div><!--Close_wrapper--> 
</body> 
</html>

Źródło

2010-01-15 Scott C.

Czy możesz również opublikować kod HTML? – Flatlin3

Odpowiedź na pytania, które zawierają float i wrap w jednym zdaniu jest zwykle

overflow: auto

Jeśli chcesz, aby owijarka do auto-poszerzyć wysokości, że powinien Zrób to.

Źródło

2010-01-15 16:32:21

Zdecydowanie najbardziej eleganckie rozwiązanie znalazłem w problemie. Dzięki! – nunespascal

Znakomita odpowiedź i zgrabna zasada przy uruchamianiu! Dziękuję Ci. –

Musisz dodać element z clear:both po div s.

Demo

Źródło

2010-01-15 16:34:17 SLaks

To jest poprawne. Truje posty szybciej ode mnie. – Wes

Można dodać coś takiego < br style = „clear: both”/> jako ostatni element w Twoim owijki do zmuszenia go owinąć wokół elementów, które są poza strumieniem treści.

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

<br style="clear:both" /> 

</div><!--Close_wrapper-->

Źródło

2010-01-15 16:37:15 Wes

Chciałbym użyć: po klasie psuedo jak poniżej. Wydaje się nieco bardziej oczywiste, co ma się wydarzyć, a nieco mniej jak dziwactwo przeglądarki. Jestem pewien, że to nie jest rozwiązanie do przepełnienia, które ma być oficjalnie.

#wrapper:after { 
    clear:both; 
    display: block; 
    content: " "; 
}

Źródło

2013-07-22 11:03:37 cedd

Pytanie opakunkowe, gdy zawiera pływające divy

Odpowiedz

Powiązane problemy