CSS: вложенные элементы без явной ширины и переноса слов

Question

Я пытаюсь расположить подпись под изображением, не зная точно ширину изображения. Мне бы хотелось, чтобы заголовок распространялся на всю ширину изображения, но не растягивал острие родительских элементов и не переносил строки.

Я бы хотел избежать использования javascript (чтение и применение ширины к элементам) или использования max-width: 123px, поскольку диапазон возможных ширин велик.

Код в настоящее время выглядит примерно так, но может быть изменен свободно. Ширина изображения неизвестна, но ограничена максимальным размером.

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

Любые предложения приветствуются.

Answer 1

сначала получите стили из html; они принадлежат CSS.

тогда, я думаю, что вы можете сделать, это установить положение div на «относительный», но оставить его ширину на auto и его переполнение на «hidden». Скрытый параметр должен заставить его быть достаточно большим для всех его дочерних элементов.

Подпись, которую вы затем установите в положение: авто, и внизу: 0, слева: 0, ширина: 100%.

Это должно выполнить то, что вы ищете.

Answer 2

Вы можете установить ширину заголовка div в несколько% от родительского.

То есть, если родительский элемент имеет (x) px ширины (из-за того, что изображение внутри приводит к тому, что оно становится таким широким), тогда ширина поля заголовка может быть установлена ​​на некоторый% (width: 100%; возможно).