Задать вопрос
@rusmazel
Обычный человек

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

Не знал как корректно сформулировать задачу одним вопросом, поэтому если вопрос звучит непонятно и/или некорректно, прошу прощения. Задача стоит такая:
1d6462fb8a294924bd230e16fdfcc33e.png

Есть некая фотография, она может быть произвольного размера и мы не можем знать какого.
Под фото должны располагаться описание фото (то есть название картины или т.п.) и имя автора фото. При этом - название прижимается к левому краю фото, а имя автора - к правому. Картинка с описание располагается посреди текста большой статьи.

Название и имя автора:
- могут быть случайной длины
- случайное число строк
- выравниваются по верху
- всегда ограничиваются пределами изображения, расположенного выше

Можно ли как-то реализовать данную задачу, используя только HTML и CSS, учитывая что должна обеспечиваться поддержка всех современных браузеров и IE8+?

P.S. Я пробовал выравнивать блоки абсолютно, но в таком случае блоки выходят из потока и при числе строк больше 1, подсказка начинает наползать на текст статьи.
Также пробовал делать блоки содержащие описание и имя автора inline-block, в таком случае вроде бы все здорово - но если текст описания слишком длинный - имя автора вылазит за границы фото. При table-cell происходит аналогично inline-block.

Может быть я упускаю какой-то элементарный момент из виду в силу накопившейся за день усталости. Помогите, если не сложно с решением задачи ) Спасибо!
  • Вопрос задан
  • 2336 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
@zuraavl
можешь добавить к блоку где много текста фиксированную ширину - пикселей 150. Тогда текст будет не наезжать, а переноситься на новую строку
Ответ написан
Комментировать
@tef
Нужно обернуть это всё дело в див и задать ему inline-block, а так же блок с описанием и автором тоже обернуть в отдельный див. Затем описанию и автору задать inline-block. Автору ставите text-align: right. Описанию выставляете ширину в 40%, а автору 30%. С шириной можно поэкспериментировать на свой вкус.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы