CSS: verschachtelte Elemente ohne explizite Breite und Wortverpackung

Question

Ich versuche, eine Bildunterschrift unter einem Bild zu positionieren, ohne dass die Breite der Bilder ausdrücklich bekannt ist. Ich möchte, dass sich die Bildunterschrift auf die vollständige Bildbreite erstreckt, aber nicht die Witdh der übergeordneten Elemente ausdehnt und stattdessen die Linien einpackt.

Ich möchte vermeiden, JavaScript (Lesen und Anwenden von Breiten auf Elemente) oder die Verwendung von maximaler Breite: 123px zu verwenden, da der Bereich möglicher Breiten groß ist.

Der Code sieht derzeit so aus, kann aber frei geändert werden. Die Bildbreite ist unbekannt, aber auf eine maximale Dimension beschränkt.

<div style="float:right; width:auto;">  
  <img src="http://" \>
  <div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
    My caption which can be longer then the image above and should wrap, I do not want to use max-width.
  </div>
</div>

Alle Vorschläge willkommen.

Answer 1

Holen Sie sich zunächst die Stile aus der HTML; Diese gehören zu CSS.

Dann denke ich, dass Sie die Position des DIV auf "Verwandte" einstellen können, aber die Breite zum Auto und ihren Überlauf zu "versteckt" lassen. Die versteckte Einstellung sollte es zwingen, für alle ihre Kinderelemente groß genug zu sein.

In der Bildunterschrift setzen Sie dann auf Position: Auto und unten: 0, links: 0, Breite: 100%.

Das sollte erreichen, was Sie suchen.

Answer 2

Sie könnten die Breite der Bildunterschrift Div auf einige % der Eltern einstellen.

Das heißt, wenn das Elternteil (x) px breit ist (aufgrund des Bildes im Inneren, was es so breit ist), kann die Bildunterschrift -Breite auf einige % eingestellt werden (Breite: 100 %; vielleicht).