Comment faire en sorte qu'un élément central remplisse la largeur restante d'un conteneur en CSS ?

Remplir la largeur restante d'un conteneur avec CSS

Dans un scénario où vous avez un en-tête avec trois éléments disposés à la suite, le l'objectif est que l'élément du milieu occupe l'espace restant dans l'en-tête. Pour y parvenir, la combinaison de l'affichage en bloc en ligne et de la fonction calc() en CSS s'avère efficace.

La solution de code

La structure HTML fournie se compose d'un en-tête contenant une image, un élément du milieu avec du texte et un élément de droite. Pour manipuler leur mise en page, nous appliquons CSS comme suit :

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}</code>

Explication

• Inline-Block : Affichage des éléments en ligne -blocks garantit qu'ils restent sur la même ligne et se comportent comme des éléments de bloc, permettant des ajustements de largeur et de hauteur.
• Fonction calc() : Cette fonction effectue des opérations mathématiques sur les valeurs CSS. Dans ce cas, nous calculons la largeur restante en soustrayant la largeur fixe de l'élément de gauche (100px) de 100%.

Le résultat de ce code est que l'élément du milieu s'étire pour remplir l'espace restant dans l'en-tête, en accueillant son contenu tandis que l'élément de droite conserve sa largeur de 100px.

Solution alternative

Si vous préférez avoir un espace entre les divs, vous pouvez modifiez le CSS en définissant la taille de police de l'élément externe (en-tête) sur 0 :

<code class="css">header {
  font-size: 0;
  ...
}</code>

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!