Question

我试图将两个DIV元素括起来，内部1和1包装DIV（实心绿色边框）内的内部2（虚线红色边框），但包装器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

Answer 1

由于您同时悬浮#inner-1和#inner-2，因此您需要clear fix。基本上，在父（overflow: auto）上设置#wrapper应该可以解决问题。

Answer 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 />的边距，使其几乎不可见。

Answer 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“＆gt;”在包含DIV的底部。

Answer 4

也许值得注意的是，有一些不同的“清除浮动”方法。这个对我很有用，只涉及向父元素添加一个类：

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

Answer 5

如前所述，你需要一些强制包含div的方法来实现浮动div占用空间。通常称为清算浮动，关于互联网的主题有很多讨论。

在pathf.com上的

This post是比较流行的一种。阅读文章时，请务必阅读所有评论。

嵌套的DIV元素

5 个答案: