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

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

Susan Sarandon
Libérer: 2024-10-27 08:41:30
original
1103 Les gens l'ont consulté

How can I use CSS `calc()` to make an element fill the remaining width of its container?

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal