для Internet Explorer.
=======================

ти, я пытаюсь создать версию элемента figure (готовится к выпуску в HTML5), в результате чего у меня есть изображение с кратким описанием под ним.

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

Базовый HTML:

Я хорошо разбираюсь в CSS, но не могу придумать ни одного чистого решения CSS, не добавив`style="width:100px"` к`div` чтобы соответствовать ширине изображения.

**Обновить**После небольшого поиска и обдумывания лучший метод, похоже, использует встроенную ширину в div. Я сохраню атрибут width на изображении, на случай, если я хочу, чтобы div был немного шире, чем изображение (например, чтобы разместить более длинный заголовок).

Этот подход также означает, что у меня может быть два изображения рядом с подписью ниже. Если у меня есть набор изображений одинакового размера, я, конечно, могу добавить дополнительный стиль к каждому`div`.

Спасибо всем, кто ответил!

**стилей**

примечание: чтобы включить перенос, просто удалите эту последнюю строку CSS

**HTML**

Я проверил это в Chrome, Firefox и IE7, и он хорошо выглядит во всех трех. Я понимаю, что это ширина на div, а не на img, но по крайней мере вам нужно установить ширину только в одном месте. Если не считать выражений css (только для IE), я не вижу способа установить ширину внешнего элемента div в ширину первого дочернего элемента.



 чтобы соответствовать изображению автоматически, вы можете использовать

Это заставляет div вести себя как таблица (не поддерживается в Internet Explorer). Или вы можете использовать таблицу вместо div. Я не думаю, что есть другой способ установить ширину автоматически.



`display:table` решение для всех других браузеров и[CSS поведение](https://www.google.nl/search?hl=en&rlz=1C1GGLS_en-USNL292NL304&q="internet+explorer"+css+behaviour&btnG=Search) для Internet Explorer.



[это](https://www.cs.tut.fi/~jkorpela/www/captions.html) решил использовать встроенный стиль окружающего элемента. Кажется, лучшее решение, чем использовать таблицу для меня.



Это также может быть достигнуто с помощью`'display: table-caption'` для подписи, следующим образом:

HTMLстилейЭтот блок также можно перемещать слева направо от другого текста. Я проверял это в IE8 +. Вот пример JSBin:<http://jsbin.com/xiyevovelixu/1>