Comment faire en sorte qu'un div interne remplisse l'espace horizontal restant après que la largeur d'un autre div interne soit définie dynamiquement ?

Définition de la largeur des divisions internes

Lorsque vous travaillez avec des divs imbriquées et du contenu flexible, déterminer la largeur appropriée pour chaque div peut être difficile. Cette question explore une technique permettant de définir la largeur d'un div interne sur l'espace horizontal restant après avoir pris en compte la largeur d'un autre div interne.

Structure HTML :

Le La structure HTML se compose d'un div externe et de deux div internes imbriqués :

<div>

Énoncé du problème :

Le but est de faire en sorte que le div #inner2 remplisse l'horizontale restante l'espace après que la largeur du div #inner1 a été déterminée dynamiquement en fonction de son contenu.

Ingrédient mystère : Débordement : Caché

La clé pour réaliser cette mise en page est l'utilisation de la propriété CSS overflow : Hidden ; sur le div externe (#outer). Cela demande au navigateur de contraindre ses enfants flottants dans ses propres limites.

HTML révisé :

Pour appliquer le CSS efficacement, les identifiants div doivent suivre une syntaxe CSS valide :

<div>

Solution CSS :

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

Compatibilité des navigateurs et cas Edge :

Cette solution a été testée et confirmé qu'il fonctionne correctement dans IE 6, 7 et 8 ; Firefox 3.5 ; et Chrome 4. Dans IE 6, une règle CSS supplémentaire utilisant zoom : 1 ; est nécessaire pour s'assurer que le div #inner2 remplit l'espace restant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!