Verschachtelte DIV-Elemente

Ich versuche, zwei DIV-Elemente, inner-1 & inner-2, (gepunkteter roter Rahmen) in einen Wrapper DIV (solider grüner Rahmen) einzuschließen, aber das UMpacker-DIV-Element wird nicht erweitert, um die inneren DIVs einzuschließen.

Was mache ich falsch?

<!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

Antwort auf "Verschachtelte DIV-Elemente " 5 von antworten

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

Probieren Sie das aus.

Sie können die Ränder für das <br /> so that it is hardly visible too. so einstellen, dass es auch kaum sichtbar ist.

Da Sie sowohl #inner-1 and als auch #inner-2, you'll need a schweben, benötigen Sie ein clear fix. Basically, setting overflow: auto on the parent ( on the parent ( #wrapper) should do the trick. ) should do the trick. . Grundsätzlich sollte das Festlegen von overflow: auto on the parent ( auf dem übergeordneten Element ( #wrapper) should do the trick. ) den Trick tun.

Dies könnte für Sie funktionieren:

<!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> 

Hinzugefügt "div style="clear: beide">" am unteren Rand des enthaltenden DIV.

Es sind die Schwimmer, die Ihnen das Problem geben.

Es könnte auch erwähnenswert sein, dass es ein paar verschiedene Methoden zum "Clearing Vonschschwimmern" gibt. Dieses funktioniert ziemlich gut für mich und beinhaltet nur das Hinzufügen einer einzelnen Klasse zum übergeordneten Element:

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

Wie bereits gesagt wurde, brauchen Sie eine Methode, um die enthaltenden div zu zwingen, um zu erkennen, dass die schwimmenden Divs Raum eingenommen haben. Allgemein bekannt als Clearing a float, gibt es eine ganze Reihe von Diskussionen über das Thema rund um das Internet.

This post at pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well. bei pathf.com ist einer der beliebtesten zu verwenden. Wenn Sie den Artikel lesen, lesen Sie auch alle Kommentare.