Zagnieżdżone elementy DIV

Próbuję załączyć dwa elementy DIV, wewnętrzne - 1 i wewnętrzne-2, (przerywana czerwona ramka) wewnątrz wrapper DIV (solid green border), ale wrapper div element nie rozszerza się, aby zamknąć wewnętrzne Div.

Co robię źle? 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
</div>
</body>
</html>

Rendered HTML

Author: xraminx, 2009-07-06
Source

5 answers

Ponieważ pływasz zarówno #inner-1, jak i #inner-2, Będziesz potrzebował wyraźnej poprawki . Zasadniczo ustawienie overflow: auto na rodzicu (#wrapper) powinno załatwić sprawę.

 31
Author: moff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-06 15:30:20 
.
.
.
 <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
     content inside inner-2 div 
 </div>
 <br style="clear:both" />
</div>
.
.
.
Spróbuj.

Możesz ustawić marginesy dla <br /> tak, aby były one prawie niewidoczne.

 4
Author: anand.trex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-06 15:29:27

To pływaki dają ci problem. to może Ci się udać: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>

Dodano "div style = " clear: both" > " na dole zawierającego DIV.

 3
Author: mupdyke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-06 15:38:55

Warto również zauważyć, że istnieje kilka różnych metod "czyszczenia pływaków". Ta działa całkiem dobrze dla mnie i polega tylko na dodaniu jednej klasy do elementu nadrzędnego: 

.clearfix:after{content:"\0020";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}
 2
Author: Rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-06 15:44:15

Jak już zostało powiedziane, potrzebujesz jakiejś metody zmuszania zawierającego div do uświadomienia sobie, że pływające div zajęły miejsce. Powszechnie znany jako clearing float, istnieje sporo dyskusji na ten temat w Internecie.

This post at pathf.com jest jednym z bardziej popularnych w użyciu. Kiedy czytasz artykuł, przeczytaj również wszystkie komentarze.

 2
Author: wlashell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-06 16:06:22