Вёрстка блока с подписью к картинке неопределённой ширины

Question

[qtuz]

Вопрос лучше всего проиллюстрирует картинка:

Как сделать так, чтобы подпись была шириной с картинку и переносилась?

Answer 1

[PaulZi]

Задайте врапперу:

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

Тогда картинка и текст будут максимально сжиматься вплоть до размеров самого большого Inline-блока — картинки.

Comments

[PaulZi]

jsfiddle.net/XpF5E/1/

[qtuz]

Огромное спасибо! Не знал про такой хак с шириной таблцы :)

[Олег Торбасов]

Только, наверное, семантичнее использовать теги figure и figurecaption.

[qtuz]

Покуда требуется поддержка старых IE, будем обходиться дивами :)

[PaulZi]

Ну чисто для ie6-ie7 остаётся два варианта: применять реальные таблицы (тэг <table> вместо <div style="display: table">), либо писать JS (можно даже прямо в CSS с помошью expression-синтаксиса попробовать)
Хотя судя по последней статистике обе эти версии уже можно спокойно хоронить, но дело конечно ваше.

[PaulZi]

PS. В будущем можно будет использовать:

.wrapper
{
width: min-content;
}

Сейчас он уже реализован в firefox и chrome с префиксами.

Answer 2

[Илья Шабанов]

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

Answer 3

[Talyutin]

Внешнему div'у, в котором картинка, ширину задайте и padding.
<div style="background-color: red; padding: 10px; width: 100px;"> <img src="image.jpg"> <p style="margin:0">Эта строчка будет переносить сколько нужно раз</p>

Comments

[qtuz]

К сожалению ширина картинки заранее неизвестна, а подключать сюда javascript не хочется.

[Talyutin]

От чего ширина внешнего дива зависит?

[qtuz]

Ширина внешнего дива должна зависеть от размера картинки, который заранее неизвестен.

[Илья Шабанов]

Но без знания ширины и js здесь никак не обойтись

Answer 4

[Talyutin]

«Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.» Как-то все-таки нужно ширину знать. Можете показать более конкретный пример? Где именно используется?

Comments

[qtuz]

Да в общем-то это картинка с подписью в любой статье. Вот гипотетический пример jsfiddle.net/mWXrP/1/. Только это вариант, когда ширина задана, а у нас она заранее неизвестна.

[venn]

Вот, например, можно сделать так, если заранее неизвестна ширина изображения: jsfiddle.net/mWXrP/2/