Comment puis-je faire en sorte qu'un Wrapper Div ajuste dynamiquement sa largeur pour qu'elle corresponde à la largeur de son image enfant ?

Faire en sorte que le Wrapper s'adapte à la largeur de l'image de l'enfant

Problème :

Le but est de concevoir un wrapper qui ajuste sa largeur de manière dynamique en fonction de la largeur de son image enfant. En d'autres termes, le wrapper ne doit pas avoir une largeur fixe mais doit simplement s'adapter à la largeur de l'image contenue.

Exemple :

Le code fourni présente une image enveloppée dans un emballage div bordé de rouge. Cependant, le div wrapper présente actuellement une largeur fixe, ce qui conduit à une apparence indésirable :

<div>

Objectif :

Le résultat souhaité est un wrapper qui correspond dynamiquement au largeur de l'image enfant, permettant une mise en page visuellement attrayante sans chevauchement text :

<div>

Solution :

Une approche non conventionnelle pour y parvenir consiste à utiliser la propriété display: table pour le wrapper. En définissant la largeur du wrapper à 1 %, l'image enfant remplacera cette largeur et prendra sa taille réelle, déterminant ainsi la largeur du wrapper.

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

Cette solution fournit une méthode simple et efficace pour créer un wrapper qui s'adapte à la largeur de l'image de l'enfant, assurant une mise en page visuellement attrayante.

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!