Ограничить текст шириной изображения/ширины sibling в CSS

Я по существу пытаюсь создать версию элемента "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.

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

Ответы

Ответ 1

Stylesheet

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

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

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

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

Ответ 2

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

HTML

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Stylesheet

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

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

Ответ 3

Для того, чтобы автоматически установить ширину изображения, вы можете использовать

.figure {
  display: table;
  width: 1px;
}

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

Изменить. Самый простой способ - забыть об автоматической ширине и установить ее вручную. Если это действительно необходимо, вы можете использовать JavaScript или таблицу. В этом случае использование таблицы не так уродливо, потому что вы обращаетесь к ограничению версии HTML. В случае серверных скриптов вы также можете установить ширину при создании страницы.

Ответ 4

У меня была такая же проблема, и после прочтения this решил использовать встроенный стиль для окружающего элемента. Кажется лучшим решением для использования таблицы для меня.

Ответ 5

Вы можете использовать решение display:table для всех других браузеров и CSS Behavior для Internet Explorer.