嵌套的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。基本上，在母公司（#wrapper）上设置overflow: auto应该有效。

来源

2009-07-06 15:30:20 moff

设置“宽度：100％”和“溢出：隐藏”也适用于父元素 – o01 2011-08-31 12:07:28

. 
. 
. 
<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的底部。

来源

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来实现浮动的div占用了空间的一些方法。通常被称为清除浮动，关于互联网上的这个话题有很多讨论。

This post在pathf.com是一个比较流行的使用。当你阅读文章时，一定要阅读所有的评论。

来源

2009-07-06 16:06:22 wlashell

嵌套的DIV元素

回答

相关问题