Pourquoi mon contenu n'empêche-t-il pas une division parent de s'effondrer ?-tutoriel CSS-php.cn

Why Doesn't My Content Prevent a Parent Div from Collapsing?

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%;
}

Copier après la connexion

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!

source：php.cn

Article précédent：Quelle est la différence entre SCSS et Sass ? Article suivant：Pourquoi mes propriétés de grille CSS n'affectent-elles pas les éléments de liste imbriquée ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2422

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2552

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2161

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...