web-dev-qa-db-ja.com

ネストされたDIV要素

2つのDIV要素、inner-1とinner-2（赤い点線の枠）をラッパー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>

レンダリングされたHTML

cssxhtmlhtml
19
xraminx

両方浮いているので#inner-1および#inner-2、 明確な修正 が必要です。基本的に、overflow: auto親（#wrapper）トリックを行う必要があります。

31
moff
.
.
.
 <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
     content inside inner-2 div 
 </div>
 <br style="clear:both" />
</div>
.
.
.

やってみて。

<br />のマージンを設定して、あまり見えないようにすることもできます。

4
anand.trex

問題を引き起こしているのはフロートです。これはあなたのために働くかもしれません：

<!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 style = "clear：both">」を追加しました。

3
mupdyke

すでに述べたように、フローティングdivがスペースを占有していることを認識するために、包含divを強制するいくつかの方法が必要です。一般的にフロートをクリアすることとして知られていますが、インターネットに関する話題についてはかなりの議論があります。

この投稿 pathf.comは、最も人気のあるものの1つです。記事を読むときは、必ずすべてのコメントも読んでください。

2
wlashell

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

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