Html 嵌套的 DIV 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1087602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nested DIV elements
提问by xraminx
I am trying to enclose two DIV elements, inner-1 & inner-2, (dotted red border) inside a wrapper DIV (solid green border) but the wrapper DIV element does not expand to enclose the inner DIVs.
我试图将两个 DIV 元素，inner-1 和 inner-2（红色虚线边框）包含在包装 DIV（实心绿色边框）内，但包装 DIV 元素不会扩展以包含内部 DIV。
What am I doing wrong?
我究竟做错了什么？
<!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>
回答by moff
回答by anand.trex
.
.
.
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<br style="clear:both" />
</div>
.
.
.
Try that.
试试那个。
You can set the margins for the <br />so that it is hardly visible too.
您可以设置边距<br />，使其几乎不可见。
回答by mupdyke
It is the floats that are giving you the problem. this might work for you:
是浮标给你带来了问题。这可能对你有用：
<!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>
Added "div style="clear: both">" at the bottom of the containing DIV.
在包含 DIV 的底部添加了“div style="clear: both">”。
回答by Rob
It might also be worth noting that there are a few different methods of "clearing floats" out there. This one works pretty well for me and only involves adding a single class to the parent element:
可能还值得注意的是，有几种不同的“清除浮动”方法。这个对我来说效果很好，只涉及向父元素添加一个类：
.clearfix:after{content:"##代码##20";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
回答by wlashell
As has been said already you need some method of forcing the containing div to realize the floating divs have taken up space. Commonly known as clearing a float, there are quite a few discussions on the topic around the internet.
正如已经说过的那样，您需要某种方法来强制包含 div 以实现浮动 div 已占用空间。通常被称为清除浮动，互联网上有很多关于这个话题的讨论。
This postat pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well.
