Wie kann ich einen Wrapper ohne absolute Positionierung dynamisch an die maximale Breite seines untergeordneten Bildes anpassen?

Wrapper an die maximale Breite des untergeordneten Bildes anpassen

In einem Szenario, in dem das Wrapper-Element seine Breite an die maximale Breite seines untergeordneten Elements anpassen soll Bild ist die Verwendung einer festen Breite für den Wrapper nicht die ideale Lösung. Ziel ist es, dies aufgrund der dynamischen Natur des Bild- und Textinhalts ohne absolute Positionierung zu erreichen.

Lösung:

Obwohl es keine elegante Lösung gibt, gibt es sie eine Methode, um dies mithilfe einer anderen Anzeigeeigenschaft zu erreichen. Indem Sie den Wrapper so einstellen, dass er als Tabelle angezeigt wird, und ihm mithilfe von CSS eine Breite von 1 % zuweisen, überschreibt das Bild diese Breite und wird auf seine maximale Größe erweitert.

Hier ist der CSS-Code für den Wrapper:

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

Und der HTML-Code für den Wrapper mit Bild und Text:

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

Mit dieser Technik wird der Der Wrapper wird unabhängig von der Textlänge auf die maximale Breite des untergeordneten Bildes erweitert.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Wrapper ohne absolute Positionierung dynamisch an die maximale Breite seines untergeordneten Bildes anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!