Comment puis-je faire en sorte qu'un élément remplisse la largeur restante d'un conteneur à l'aide de CSS ?

Remplir la largeur restante du conteneur avec CSS

Dans certains scénarios, il devient nécessaire d'attribuer la largeur restante au sein d'un conteneur à un élément spécifique . Par exemple, considérons une barre d'en-tête avec trois éléments : une image à gauche, un élément du milieu et un élément à droite. L'objectif est de s'assurer que l'élément « du milieu » remplit l'espace restant entre l'image et l'élément de droite.

Obtenir la mise en page souhaitée

Pour réaliser cette mise en page souhaitée , utilisez la polyvalence de calc() dans votre CSS. L'implémentation du code suivant illustre cette approche :

HTML :

<code class="html"><div class="left">
  100 px wide!
</div>
<div class="right">
  Fills width!
</div></code>

CSS :

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

Dans ce code :

• Le Les classes .left et .right sont attribuées aux éléments respectifs.
• display: inline-block; permet aux éléments de s'aligner horizontalement tout en circulant autour d'un autre contenu.
• width : définit la largeur explicite de l'élément .left sur 100 pixels, laissant l'espace restant pour l'élément .right.
• calc (100 % - 100 pixels) ; calcule dynamiquement la largeur de l'élément .right en soustrayant 100px (la largeur de .left) de 100% (la largeur totale du conteneur). Cette valeur garantit que l'élément .right remplit l'espace restant.

En utilisant cette technique, l'élément .right ajustera automatiquement sa largeur pour remplir l'espace disponible, obtenant ainsi la disposition souhaitée.

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!