Comment faire en sorte qu'une division interne remplisse l'espace restant après une autre division ?

Comment définir la largeur d'une division interne sur l'espace restant après une autre division

En xHTML et CSS, vous pouvez rencontrer un scénario dans lequel vous devez avoir plusieurs divs imbriqués dans un div externe avec une largeur définie de 100 %. Vous souhaitez que les divs internes soient affichés sur une seule ligne, la largeur du premier div étant déterminée par son contenu.

Pour y parvenir, vous pouvez utiliser la technique suivante :

Étape 1 : Utiliser l'affichage en ligne pour les divs imbriqués

Définissez la propriété 'display' des divs imbriqués sur 'inline' afin qu'ils apparaissent sur la même ligne.

Étape 2 : Définissez le débordement sur Caché pour la division externe

Appliquez « débordement : caché ; » au div externe pour garantir que ses éléments enfants (les divs imbriqués) restent contenus dans sa largeur.

Étape 3 : définissez la largeur sur Auto pour le premier div imbriqué

Laissez la largeur du premier div imbriqué (#inner1) non spécifiée comme « auto ». Cela lui permet de s'étendre à la largeur nécessaire en fonction de son contenu.

Étape 4 : Définir le débordement sur Caché pour la deuxième division imbriquée

Appliquer « débordement : caché ; » au deuxième div imbriqué (#inner2) pour l'empêcher de s'étendre au-delà de l'espace restant dans le div externe.

Exemple de code :

<div>

Considérations supplémentaires :

Pour la compatibilité avec IE 6, vous devrez peut-être ajouter du CSS supplémentaire à l'aide de commentaires conditionnels HTML, comme indiqué dans la réponse fournie.

Avec cette technique, les divs internes seront être affiché en ligne, le deuxième div s'ajustant automatiquement pour occuper l'espace restant dans le div externe.

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!