Maison >interface Web >tutoriel CSS >Pourquoi mon « extérieur » ne contient-il pas mon « intérieur » lorsqu'il est redimensionné ?

Pourquoi mon « extérieur » ne contient-il pas mon « intérieur » lorsqu'il est redimensionné ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-18 00:11:09960parcourir

Why Doesn't My Outer `` Contain My Inner `` When Resized?

Pourquoi le

Ici, le
interne n'est pas complètement entouré ?

Problème :

Dans l'extrait de code fourni, le contenu du

n'empêche pas le
de rétrécir lorsque la fenêtre est redimensionnée. En conséquence, le
déborde sur le
extérieur.

Discussion :

Le problème se pose parce que le

est défini pour avoir une largeur fixe. Par défaut, les éléments de bloc (éléments de bloc) ont leur largeur basée sur leur élément parent. Cependant, le
contient du contenu qui dépasse la largeur du
externe, ce qui provoque son débordement.

Solution :

Pour que le

enrouler autour du
interne, on peut utiliser une combinaison de bloc en ligne et de min-width : 100 %. En définissant le paramètre externe
au bloc en ligne, sa largeur devient basée sur le contenu plutôt que sur le parent. L'ajout de min-width:100% garantit que le champ
n'est jamais plus petit que la largeur de son contenu.

Code mis à jour :

.demo {
  ...
  display:inline-block;
  min-width:100%;
}

Cette modification permet au

pour redimensionner automatiquement en fonction de son contenu, empêchant ainsi le
de se renverser à l'extérieur.

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