CSS: annidati elementi senza larghezza esplicito e ritorno a capo automatico

Question

Sto cercando di posizionare una didascalia sotto l'immagine senza una conoscenza esplicita di larghezza delle immagini. Vorrei la didascalia di estendere a tutta la larghezza dell'immagine, ma non per allungare witdh gli elementi padre e avvolgere le linee, invece.

desidero evitare utilizzando JavaScript (lettura e applicando larghezze di elementi) oppure utilizzando max-width:. 123px come la gamma di larghezze possibili è grande

Il codice attualmente simile a questa, ma può essere modificato liberamente. La larghezza dell'immagine è sconosciuta, ma limitata ad una dimensione massima.

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

Eventuali suggerimenti benvenuti.

Answer 1

In primo luogo, ottenere gli stili dal html; quelli appartengono in CSS.

poi, penso che quello che si può fare è impostare la posizione del div a "relativo", ma lasciare la sua larghezza per l'auto e il suo troppo pieno di "nascosto". L'impostazione nascosta dovrebbe costringerlo a essere abbastanza grande per tutti i suoi elementi figlio.

La didascalia, è quindi impostata su posizione: auto, e in basso: 0, rimasto: 0, larghezza:. 100%

Questo dovrebbe realizzare quello che stai cercando.

Answer 2

È possibile impostare la larghezza del div didascalia a una certa% del genitore.

Cioè, se il genitore è (x) px di larghezza (a causa della immagine all'interno facendolo essere che larghezza) allora la larghezza casella didascalia può essere impostata a qualche%. (Larghezza: 100%; forse)