Comment puis-je faire en sorte qu'un DIV remplisse la largeur restante de son conteneur une fois que d'autres DIV ont été positionnés ?

Remplir la largeur restante avec un DIV

Il est souvent nécessaire de répartir la largeur restante d'un conteneur div à un autre div. Dans l'exemple donné, l'objectif est que "div2" remplisse la largeur restante après que "div1" et "div3" aient occupé l'espace qui leur est alloué.

Pour y parvenir, utilisez le CSS suivant :

#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }

Explication :

• Les "divs" occupent naturellement 100% de leurs la largeur du conteneur, sauf définition contraire explicite.
• "div1" et "div3" reçoivent respectivement des largeurs fixes et "float: left" et "float: right", pour les aligner de chaque côté.
• "div2" est positionné après "div3" dans le HTML.
• "div2" reçoit des marges gauche et droite équivalentes aux largeurs de "div1" et "div3." Cela force son contenu à occuper l'espace restant dans son conteneur.

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!