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

Я пытаюсь заключить два элемента DIV, внутренний-1 & внутренний-2 (пунктирная красная рамка) внутри обертки DIV (сплошная зеленая граница), но элемент 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>

Rendered HTML

источник

2009-07-06 xraminx

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

источник

2009-07-06 15:30:20 moff

установка 'width: 100%' и 'overflow: hidden' также работает для родительского элемента – o01

Нет ли другого решения, кроме как использовать Javascript? У меня такая же проблема, у внешнего div нет сплошной ширины, но использование Javascript кажется обходным путем. – user1226868

Ссылка на четкое исправление в сообщении выше перенесена на [здесь] (http://www.sitepoint.com/simple-clearing-of-floats/) –

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

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

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

источник

2009-07-06 15:29:27

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

<!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 стиль =» ясно: как «>» в нижней части контейнера DIV.

источник

2009-07-06 15:38:55 mupdyke

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

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

источник

2009-07-06 15:44:15 Rob

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

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

источник

2009-07-06 16:06:22 wlashell

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

ответ

Смежные вопросы