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, и внизу: 0, слева: 0, ширина: 100%.

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

Answer 2

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

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