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

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

Как сделать так, чтобы подпись была шириной с картинку и переносилась?
  • Вопрос задан
  • 5194 просмотра
Решения вопроса 1
PaulZi
@PaulZi
Задайте врапперу:
.wrapper
{
display: table;
width: 1px;
}

Тогда картинка и текст будут максимально сжиматься вплоть до размеров самого большого Inline-блока — картинки.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Очевидно что задать ширину врапперу (бледно серому большому блоку) или самой подписи, без задания ширины, как мне кажется, не обойтись.
Ответ написан
Комментировать
Talyutin
@Talyutin
Внешнему div'у, в котором картинка, ширину задайте и padding.
<div style="background-color: red; padding: 10px; width: 100px;"> <img src="image.jpg"> <p style="margin:0">Эта строчка будет переносить сколько нужно раз</p>
Ответ написан
Talyutin
@Talyutin
«Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.» Как-то все-таки нужно ширину знать. Можете показать более конкретный пример? Где именно используется?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы