CSS: elementos anidados sin ancho explícito y envoltura de palabras

Question

Estoy tratando de colocar una leyenda debajo de una imagen sin conocimiento explícito del ancho de las imágenes. Me gustaría que la leyenda se extienda al ancho de imagen completo, pero no estire los elementos de los padres y envuelva las líneas.

Me gustaría evitar usar JavaScript (leer y aplicar anchos a elementos) o usar el ancho máximo: 123px, ya que el rango de anchos posibles es grande.

El código actualmente se parece a esto, pero se puede cambiar libremente. El ancho de la imagen es desconocido, pero restringido a una dimensión máxima.

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

Cualquier sugerencia bienvenida.

Answer 1

Primero, saca los estilos del HTML; Esos pertenecen a CSS.

Entonces, creo que lo que puedes hacer es establecer la posición del DIV en "pariente", pero deja su ancho al auto y su desbordamiento a "oculto". La configuración oculta debería obligarlo a ser lo suficientemente grande para todos sus elementos infantiles.

La leyenda, luego se ajusta a la posición: AUTO e Bottom: 0, izquierda: 0, Ancho: 100%.

Eso debería lograr lo que estás buscando.

Answer 2

Podrías establecer el ancho del subtítulo Div en algún % de los padres.

Es decir, si el padre tiene (x) px de ancho (debido a la imagen en el interior, lo que hace que sea tan amplia), entonces el ancho de la caja de subtítulos se puede establecer en algún % (ancho: 100 %; tal vez).