Comment faire en sorte qu'un Wrapper Div corresponde de manière fluide à la largeur d'une image enfant ?

Comment s'assurer qu'un Wrapper Div s'adapte à la largeur d'une image enfant

Problème : Comment configurer un div wrapper pour prendre la largeur maximale d'une image enfant tout en garantissant que la largeur du div reste fluide ?

Solution :

Une approche non conventionnelle consiste à définir la propriété d'affichage du div wrapper sur "table" et sa largeur sur "1 %". En faisant cela, l'image dépasse la contrainte de largeur du wrapper et affirme sa propre taille sur le wrapper.

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

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Cette solution de contournement permet au div de s'adapter dynamiquement à la largeur de l'image, même si le div la largeur n'est pas explicitement définie.

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!