Я по существу пытаюсь создать версию элемента "figure" (наступающий в HTML5), в результате чего у меня есть изображение с кратким описанием ниже.
Тем не менее, я хочу ограничить ширину этого всего элемента изображением, поэтому текст не шире изображения (при необходимости обертывая несколько строк).
Основной HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
Я хорошо разбираюсь в CSS, но я не могу придумать никакого чистого решения для CSS, не добавляя style="width:100px"
в div
для соответствия ширине изображения.
Обновление. После небольшого поиска и мышления лучший метод, похоже, использует встроенную ширину в div. Я сохраню атрибут width на изображении, если я хочу, чтобы div был немного шире изображения (например, чтобы разместить более длинный заголовок).
Этот подход также означает, что я мог бы иметь два изображения бок о бок с надписью ниже. Если у меня есть набор изображений того же размера, я могу, конечно, добавить дополнительный стиль к каждому div
.
Спасибо всем, кто ответил!