web-dev-qa-db-fra.com

Couleur de fond pour div avec enfant divs

<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

Pourquoi la couleur de fond n'apparaît-elle pas entre ces 2 divs? Output after running this page

htmlbackground-color
10
Null Head

Lorsque vous faites flotter des éléments, vous devez indiquer la largeur des éléments flottants. Sinon, vous risquez de rencontrer des comportements inattendus sur différents navigateurs.

Consultez ce tutoriel , il y a de bonnes informations sur les flottants dans css. [lien est mort]

En gros, si vous fournissez un overflow:hidden; au conteneur div et une largeur aux éléments flottants, votre problème sera résolu.

<div style="overflow: hidden;">
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
</div>

De même, vous pouvez ajouter un autre div où vous voulez normaliser le flux, comme ceci:

<div>
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
  <div style="clear:both;"></div>
  <div>This div will be at the same place 
       as if the previous elements are not floated</div>
</div>

Les deux vont marcher :)

MODIFIER

Une autre méthode que j'utilise fréquemment ces jours-ci consiste à faire flotter le premier élément et à définir un margin-left sur l'élément suivant. Par exemple:

<div>
    <div style="float: left; width: 300px;">Some text</div>
    <div style="margin-left: 300px;">Some text</div>
    <div style="clear: both;"></div>
</div>

L'avantage de cette méthode est que l'élément suivant (la deuxième div dans ce cas) n'a pas besoin d'une largeur fixe. De plus, vous pouvez ignorer le troisième div (clear: both;). C'est optionnel. Je l’ajoute au cas où la div flottée aurait une hauteur plus longue que la deuxième div, car si vous n’ajoutez rien, la div parent obtiendra toujours la hauteur de la deuxième div. 

7
Savas Vedova

Il suffit de définir le conteneur div à overflow: hidden;.

Si vous définissez des éléments comme éléments flottants, ils ne feront plus partie du flux normal du document.

div { background: #ccc; overflow: hidden; }

Et tu n’as même pas fait de cercle à main levée;)

6
PeeHaa

Un élément flottant n'affecte pas la taille du parent, à moins que le parent ne contienne spécifiquement les enfants utilisant le style overflow.

Votre div externe a les mêmes couleurs d’arrière-plan que les divs enfants, mais la hauteur du parent est zéro et vous ne voyez donc pas son arrière-plan.

4
Guffa

C'est parce que les deux divs sont flottants, de sorte que le div contenant n'a pas de hauteur. Si vous deviez ajouter un troisième enfant div qui n'était pas un float, donnez-lui une hauteur de 0 et clear:both, la couleur d'arrière-plan devrait apparaître.

2
Gareth

L'espace blanc que vous affichez est une partie du corps et vous définissez la couleur d'arrière-plan sur la div mais pas sur le corps. C'est la raison pour laquelle la partie du corps est vide.

Pour colorer la partie vide, vous devez ajouter le code suivant:

<html>
<head>
    <style type="text/css">
 div
 {
 background-color:#ccc;
 }
 body{
 background-color:#ccc;
 }
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

Vous pouvez modifier la couleur d'arrière-plan du corps en modifiant la couleur d'arrière-plan dans le style du corps.

1
Klab