Sfondo non visualizzato dietro floating fliv

Cosa c'è di sbagliato con questo codice?Sfondo non visualizzato dietro floating fliv

Lo sfondo scompare dietro i div quando aggiungo float: left a #text e #text2. Ma quando rimuovo lo float: left, tutto sembra a posto.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#first{ 
width: 200px; 
background-color: #345752; 
} 
#left_b{ 
background:transparent url('img/left.png'); 
background-position: left top; 
background-repeat: repeat-y; 
    min-height: 30px; 
} 
#right_b{ 
background:transparent url('img/right.png'); 
background-position: right top; 
background-repeat: repeat-y; 
} 
#text{ 
float: left; 
width: 50px; 
height: 30px; 
} 
#text2{ 
float: left; 
width: 70px; 
height: 30px; 
} 
</style> 
</head> 
<body> 
<div id = "first"> 
    <div id = "left_b"> 
     <div id = "right_b"> 
     <div id = "text">text 1</div> 
     <div id = "text2">text 2</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

fonte

2010-04-12 lolalola

Il contenitore #right_b è in fase di compressione perché i suoi figli sono mobili. Puoi risolvere questo problema con la tecnica "Clear-Fix". Si consiglia di controllare il seguente post Stack Overflow per un paio di soluzioni:

Which method of ‘clearfix’ is best?

Una soluzione popolare è quello di aggiungere overflow: hidden al div contenitore: #right_b:

#right_b { 
    background:transparent url('img/right.png'); 
    background-position: right top; 
    background-repeat: repeat-y; 
    overflow: hidden; 
}

Un altro comune è aggiungere <div style="clear: both;"> </div> prima di chiudere il contenitore div:

<div id="first"> 
    <div id="left_b"> 
     <div id="right_b"> 
     <div id="text">text 1</div> 
     <div id="text2">text 2</div> 
     <div style="clear: both;">&nbsp;</div> 
     </div> 
    </div> 
</div>

fonte

2010-04-12 16:57:10

Credo che bisogna dare #right_b anche un'altezza minima:

#right_b{ 
background:transparent url('img/right.png'); 
background-position: right top; 
background-repeat: repeat-y; 
min-height: 30px; 
}

elementi Float sono hanno preso fuori dal normale flusso del documento, quindi, se un elemento non contiene altri elementi "normali", questo elemento ha un'altezza di 0 (poiché non ha contenuto).

fonte

2010-04-12 17:01:33

Aggiungi questo al vostro foglio di stile:

.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 (trigger hasLayout) */ 
}

E aggiungere il "gruppo" classe per il vostro elemento "right_b", questo risolverà il div collasso:

<div id = "right_b" class="group"> 
    <div id = "text">text 1</div> 
    <div id = "text2">text 2</div> 
    </div>

fonte

2012-05-11 06:03:47

Sfondo non visualizzato dietro floating fliv

risposta

Problemi correlati