Verschachtelte DIV-Elemente

Ich versuche, zwei DIV-Elemente innerhalb eines Wrappers DIV (durchgezogene grüne Umrandung) zu umschließen, aber das Wrapper-DIV-Element wird nicht erweitert, um die inneren DIVs zu umschließen .Verschachtelte DIV-Elemente

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

Quelle

2009-07-06 xraminx

Da Sie beide #inner-1 und #inner-2 schweben, benötigen Sie eine clear fix. Grundsätzlich sollte die Einstellung overflow: auto auf dem Eltern (#wrapper) den Trick tun.

Quelle

2009-07-06 15:30:20 moff

Einstellung 'width: 100%' und 'overflow: hidden' funktioniert auch für Elternelement – o01

Gibt es wirklich keine andere Lösung als Javascript? Ich habe das gleiche Problem, das äußere Div hat keine feste Breite, aber die Verwendung von Javascript scheint eine Umgehungslösung. – user1226868

Der Link zum obigen Fix wurde in [hier] verschoben (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> 
. 
. 
.

bereit.

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

Quelle

2009-07-06 15:29:27

Es sind die Schwimmer, die Ihnen das Problem geben. dies könnte für Sie arbeiten:

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

Added "div style =" clear: both ">" am unteren Rand des umschließenden DIV.

Quelle

2009-07-06 15:38:55 mupdyke

Es könnte auch erwähnenswert sein, dass es ein paar verschiedene Methoden gibt, "floats zu floaten". Dieses funktioniert ziemlich gut für mich und beinhaltet nur eine einzige Klasse auf das übergeordnete Element hinzugefügt wird:

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

Quelle

2009-07-06 15:44:15 Rob

Wie bereits gesagt wurde, Sie einige Verfahren zwingen die enthalten div müssen zu erkennen, haben die schwebenden divs Raum aufgenommen. Allgemein bekannt als ein Float zu löschen, gibt es einige Diskussionen über das Thema rund um das Internet.

This post bei pathf.com ist einer der beliebtesten zu verwenden. Wenn Sie den Artikel lesen, lesen Sie unbedingt alle Kommentare.

Quelle

2009-07-06 16:06:22 wlashell

Verschachtelte DIV-Elemente

Antwort

Verwandte Themen