Wie kann ein Wrapper-Div fließend an die Breite eines untergeordneten Bildes angepasst werden?

So stellen Sie sicher, dass sich ein Wrapper-Div an die Breite eines untergeordneten Bildes anpasst

Problem: Wie konfigurieren Sie ein Wrapper-Div, das die maximale Breite eines untergeordneten Bildes annimmt und gleichzeitig sicherstellt, dass die Breite des Div erhalten bleibt Flüssigkeit?

Lösung:

Ein unkonventioneller Ansatz besteht darin, die Anzeigeeigenschaft des Wrapper-Divs auf „Tabelle“ und seine Breite auf „1 %“ zu setzen. Dadurch überschreitet das Bild die Breitenbeschränkung des Wrappers und legt seine eigene Größe auf dem Wrapper fest.

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

Diese Problemumgehung ermöglicht es dem Div, sich dynamisch an die Breite des Bildes anzupassen, auch wenn die Divs Die Breite wird nicht explizit festgelegt.

Das obige ist der detaillierte Inhalt vonWie kann ein Wrapper-Div fließend an die Breite eines untergeordneten Bildes angepasst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!