Вложенные элементы DIV

Я пытаюсь заключить два элемента DIV: внутренний-1 и внутренний-2 (пунктирная красная граница) внутри обертки DIV (сплошная зеленая граница), но элемент DIV оболочки не расширяется, чтобы заключить внутренние DIV.

Что я делаю неправильно?

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

визуализированный HTML

Ответы

Ответ 1

Поскольку вы плаваете как #inner-1, так и #inner-2, вам понадобится clear fix. В принципе, установка overflow: auto на родителя (#wrapper) должна сделать трюк.

Ответ 2

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

Попробуйте это.

Вы можете установить поля для <br />, чтобы он был слишком заметен.

Ответ 3

Это поплавки, которые дают вам проблему. это может сработать для вас:

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

Добавлено "div style =" clear: both " > " в нижней части содержащего DIV.

Ответ 4

Можно также отметить, что существует несколько разных способов "очистки поплавков". Это очень хорошо работает для меня и включает только добавление одного класса в родительский элемент:

.clearfix:after{content:"\0020";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}

Ответ 5

Как уже было сказано, вам нужен какой-то метод принудительного размещения содержащего div для реализации того, что плавающие divs заняли место. Обычно известный как очистка плавающего, есть довольно много дискуссий по этой теме в Интернете.

Этот пост на pathf.com является одним из наиболее популярных в использовании. Когда вы читаете статью, обязательно прочитайте все комментарии.