CSS: elementos aninhados sem largura explícita e embrulho de palavras

Question

Estou tentando posicionar uma legenda abaixo de uma imagem sem conhecimento explícito da largura das imagens. Gostaria que a legenda se estenda à largura da imagem completa, mas não estique o Witdh dos elementos dos pais e envolva as linhas.

Gostaria de evitar o uso de JavaScript (lendo e aplicando larguras em elementos) ou usar a largura máxima: 123px como a faixa de possíveis larguras é grande.

Atualmente, o código se parece com isso, mas pode ser alterado livremente. A largura da imagem é desconhecida, mas restrita a uma dimensão 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>

Quaisquer sugestões são bem -vindas.

Answer 1

Primeiro, tire os estilos do HTML; Aqueles pertencem ao CSS.

Então, acho que o que você pode fazer é definir a posição da div para "parente", mas deixe sua largura no automóvel e seu transbordamento para "oculto". O cenário oculto deve forçá -lo a ser grande o suficiente para todos os seus elementos filhos.

A legenda, você então configura para a posição: Auto e inferior: 0, esquerda: 0, largura: 100%.

Isso deve realizar o que você está procurando.

Answer 2

Você pode definir a largura da legenda DID para uma % do pai.

Ou seja, se o pai estiver de largura (x) PX (devido à imagem dentro, fazendo com que seja tão larga), a largura da caixa de legenda pode ser definida como uma % (largura: 100 %; talvez).