Maison >interface Web >tutoriel CSS >Pourquoi mon contenu n'empêche-t-il pas une division parent de s'effondrer ?
Pourquoi mon contenu n'empêche-t-il pas une division parent de s'effondrer ?
- Linda Hamiltonoriginal
- 2024-12-21 13:37:12384parcourir
Pourquoi le contenu n'empêche-t-il pas la réduction de la division parent ?
Dans le code HTML fourni, le
s'écoule de l'extérieur
lorsque la fenêtre est redimensionnée à une taille étroite. Ce comportement se produit malgré le paramètre
ayant une largeur spécifique et le
contenant une quantité importante de contenu.
Le problème sous-jacent est que le
est défini comme élément de niveau bloc par défaut. Cela signifie qu'il occupe toute la largeur disponible de son élément parent. Même avec du contenu à l'intérieur, le
peut rétrécir pour s'adapter à la taille de la fenêtre.
Combiner Inline-Block et Min-Width
Pour empêcher le
du rétrécissement, vous pouvez combiner les propriétés suivantes :
1. Inline-block : Cela permet au
se comporter comme un élément en ligne, occupant uniquement la largeur nécessaire pour s'adapter à son contenu.
2. Min-width : 100 % : Cela garantit que le
a une largeur minimale égale à 100 % de son élément parent. Cela l'empêche de rétrécir en dessous de la largeur de son contenu.
Code mis à jour
Voici le code CSS mis à jour avec les modifications recommandées :
.demo {
display: inline-block;
min-width: 100%;
}
Avec ces modifications en place , l'extérieur
restera désormais au moins aussi large que son contenu, quelle que soit la largeur de la fenêtre.
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：
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
Article précédent：Quelle est la différence entre SCSS et Sass ?Article suivant：Quelle est la différence entre SCSS et Sass ?