嵌套的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元素

回答

相關問題