Comment puis-je utiliser CSS `calc()` pour qu'un élément remplisse la largeur restante de son conteneur ?

Remplir efficacement la largeur du conteneur en CSS

Dans notre balisage HTML, nous avons une barre d'en-tête contenant trois éléments : une image, un élément du milieu et un élément de droite. L'élément du milieu est destiné à occuper la largeur restante du conteneur.

Pour y parvenir, CSS fournit un outil puissant : calc(). Cette fonction permet des calculs dynamiques de longueurs en fonction de l'espace disponible.

La magie réside dans la règle CSS suivante :

<code class="css">#middle {
  width: calc(100% - 100px);
}</code>

Dans cette règle, la largeur de l'élément #middle est calculée en soustrayant la largeur de l'élément #left à largeur fixe (100px) par rapport à la largeur totale du conteneur (100%). Cela garantit que l'élément du milieu remplit parfaitement l'espace restant.

Pour résumer, en utilisant calc(), nous pouvons ajuster dynamiquement la largeur de #middle en fonction de l'espace du conteneur disponible, ce qui donne un résultat esthétique et parfaitement barre d'en-tête aligné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!