ネストしたDIV要素

ラッパーDIV（実線の緑色の枠）内に2つのDIV要素inside-1 & inner-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

出典

2009-07-06 xraminx

#inner-1と#inner-2の両方が浮動しているので、clear fixが必要です。基本的には、親（#wrapper）にoverflow: autoを設定すると、このトリックを行う必要があります。

出典

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

「フロートをクリアする」方法がいくつかあることにも注意してください。この1は私のためにかなりうまく機能して、親要素に単一のクラスを加えることを含む：

.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

答えて

関連する問題