Pourquoi mon « extérieur » ne ferme-t-il pas complètement mon « intérieur » lors du redimensionnement de la fenêtre ?-tutoriel CSS-php.cn

Why Doesn't My Outer `` Fully Enclose My Inner `` on Window Resize?

Pourquoi le

Ne parvient pas à entourer complètement le

Quand la fenêtre se rétrécit ?

Ce problème découle de l'interaction entre les différentes propriétés CSS et les paramètres d'affichage de l'élément. Par défaut, les éléments au niveau du bloc, comme

, s'agrandiront pour remplir la largeur disponible du bloc qui les contient. Dans ce cas, le

est un élément de niveau bloc dans un bloc conteneur plus large.

Pour empêcher le

de rétrécir en dessous de la largeur du

interne, une combinaison de propriétés de bloc en ligne et de largeur minimale peut être utilisée. Voici l'explication :

inline-block : Cette valeur d'affichage permet à un élément d'agir comme un élément en ligne tout en conservant la possibilité de définir une largeur et une hauteur spécifiques. Cela empêche l'élément de passer sur une nouvelle ligne et le maintient contenu dans son élément parent.
min-width : 100 % : En définissant la largeur minimale du de s'échapper au-delà des limites du
lorsque la fenêtre se rétrécit.

En incorporant l'affichage en bloc en ligne et la largeur minimale, nous pouvons contraindre l'espace

pour épouser la largeur du

tout en conservant son comportement au niveau du bloc.

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 empêcher le déplacement d'un élément en ligne lors d'un survol en gras ? Article suivant：Comment intégrer des polices personnalisées dans HTML sans Flash ni PHP ?

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

2899

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

3082

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

2529

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