web-dev-qa-db-fra.com

Comment faire une div moyenne pour remplir l'espace entre les éléments flottants?

J'ai trois éléments div: gauche, milieu et droite. Gauche et droite sont fixes et flottantes. Ce que je veux, c'est le div moyen pour combler l'écart entre eux.

Voici mon code:

<!DOCTYPE html>
<html>
<head>
   <style>
      * {border: dotted 1px red;}
      #left {
         width: 200px;
         float: left;
      }
      #middle {
         float: left;
      }
      #right {
         width: 200px;
         float: right;
      }
   </style>
</head>
<body>
   <div id="left"  >  left   </div>
   <div id="middle">  middle </div>
   <div id="right" >  right  </div>
</body>
</html>

Auriez vous des idées pour faire ça? J'ai essayé différentes solutions mais je n'ai pas réussi à faire ce que je voulais.

htmlcsscss-float
27
Pithikos

La clé est de restructurer votre html pour avoir middle en dernier, supprimez le float du middle et remplacez-le par overflow: hidden .

Voir l'exemple du violon.

[~ # ~] html [~ # ~] 

<div id="left"  >  left   </div>
<div id="right" >  right  </div>
<div id="middle">  middle </div>

[~ # ~] css [~ # ~] 

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}
74
ScottS

J'ai pu reproduire le problème et le résoudre en utilisant des pourcentages au lieu de valeurs absolues. Puisque vous cherchez quelque chose de flexible entre les deux éléments, cela devrait fonctionner.

#left {
    width: 20%;
    float: left;
    background: #ccc;
}
#middle {
    width: 60%;
    float: left;
    display: block;
    background: #ddd;
}
#right {
    width: 20%;
    float: right;
    background: #bbb;
}

Voici une démo

3
djthoms