Elementi DIV nidificati

Sto cercando di racchiudere due elementi DIV, inner-1 & inner-2, (bordo rosso tratteggiato) all'interno di un wrapper DIV (bordo verde solido) ma l'elemento DIV wrapper non si espande per racchiudere i DIV interni .Elementi DIV nidificati

Cosa sto sbagliando?

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

fonte

2009-07-06 xraminx

Dato che stai galleggiando sia su #inner-1 e #inner-2, avrai bisogno di uno clear fix. Fondamentalmente, l'impostazione overflow: auto sul genitore (#wrapper) dovrebbe fare il trucco.

fonte

2009-07-06 15:30:20 moff

impostazione 'width: 100%' e 'overflow: hidden' funziona anche per l'elemento padre – o01

Non c'è davvero altra soluzione che usare Javascript? Sto avendo lo stesso problema, il div esterno non ha una larghezza solida, ma l'uso di Javascript sembra una soluzione. – user1226868

Il collegamento alla correzione chiara nel post precedente è stato spostato su [here] (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> 
. 
. 
.

provare che.

È possibile impostare i margini per <br /> in modo che sia appena visibile.

fonte

2009-07-06 15:29:27

Sono i galleggianti che ti stanno dando il problema. questo potrebbe funzionare per voi:

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

Aggiunto "div style =" clear: both ">" nella parte inferiore del DIV che contiene.

fonte

2009-07-06 15:38:55 mupdyke

Potrebbe anche valere la pena notare che esistono alcuni metodi diversi di "clearing floats". Questo funziona abbastanza bene per me e coinvolge solo l'aggiunta di una sola classe per l'elemento principale:

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

fonte

2009-07-06 15:44:15 Rob

Come è stato detto già avete bisogno di qualche metodo per forzare il div contenitore per realizzare i div galleggianti hanno preso spazio. Comunemente noto come clearing float, ci sono alcune discussioni sull'argomento su internet.

This post su pathf.com è uno dei più popolari da usare. Quando leggi l'articolo assicurati di leggere anche tutti i commenti.

fonte

2009-07-06 16:06:22 wlashell

Elementi DIV nidificati

risposta

Problemi correlati