Pourquoi mon « extérieur » ne contient-il pas mon « intérieur » lorsqu'il est redimensionné ?-tutoriel CSS-php.cn

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

Copier après la connexion

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!

Article précédent：Comment puis-je obtenir des éléments DOM par nom de classe en PHP ? Article suivant：Les dégradés CSS3 peuvent-ils intégrer la transparence ?

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

2804

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

2930

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

2445

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...