Comment puis-je ajuster dynamiquement un wrapper à la largeur maximale de son image enfant sans positionnement absolu ?

Rendre le wrapper conforme à la largeur maximale de l'image enfant

Dans un scénario où l'élément wrapper doit ajuster sa largeur à la largeur maximale de son enfant image, utiliser une largeur fixe pour le wrapper n'est pas la solution idéale. L'objectif est d'y parvenir sans utiliser de positionnement absolu en raison de la nature dynamique du contenu de l'image et du texte.

Solution :

Bien que ce ne soit pas une solution élégante, il existe une méthode pour y parvenir en utilisant une propriété d'affichage différente. En définissant le wrapper pour qu'il s'affiche sous forme de tableau et en lui attribuant une largeur de 1 % à l'aide de CSS, l'image remplacera cette largeur et s'agrandira jusqu'à sa taille maximale.

Voici le code CSS du wrapper :

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

Et le code HTML du wrapper avec l'image et le texte :

<div class="wrapper">
  <img src="your_image_url">
  <p>Your text content goes here.</p>
</div>

En utilisant cette technique, le le wrapper s'étendra jusqu'à la largeur maximale de l'image enfant, quelle que soit la longueur du texte.

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!