Fond ne montrant pas derrière div diviseurs

quel est le problème avec ce code? L'arrière-plan disparaît derrière les divs lorsque j'ajoute float: left à #text et #text2. Mais quand j'enlève le float: left, tout a l'air bien.Fond ne montrant pas derrière div diviseurs

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

Source

2010-04-12 lolalola

Le conteneur div #right_b se rétracte car ses enfants sont flottants. Vous pouvez résoudre ce problème avec la technique "Clear-Fix". Vous pouvez vérifier la pile suivante après débordement pour quelques solutions:

Which method of ‘clearfix’ is best?

Une solution populaire est d'ajouter overflow: hidden à votre conteneur div: #right_b:

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

Un autre commun est d'ajouter un <div style="clear: both;"> </div> avant de fermer votre conteneur 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>

Source

2010-04-12 16:57:10

Je pense que vous devez donner #right_b aussi une hauteur minimale:

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

éléments de flotteur sont pris hors du flux normal du document, donc si un élément ne contient pas d'autres « normaux » éléments, cet élément a une hauteur de 0 (car il n'a pas de contenu).

Source

2010-04-12 17:01:33

Ajoutez ceci à votre feuille de style:

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

Et ajouter la classe "groupe" à votre élément "right_b", cela va résoudre le div effondrement:

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

Source

2012-05-11 06:03:47

Fond ne montrant pas derrière div diviseurs

Répondre

Questions connexes