Не знал как корректно сформулировать задачу одним вопросом, поэтому если вопрос звучит непонятно и/или некорректно, прошу прощения. Задача стоит такая:
Есть некая фотография, она может быть произвольного размера и мы не можем знать какого.
Под фото должны располагаться описание фото (то есть название картины или т.п.) и имя автора фото. При этом - название прижимается к левому краю фото, а имя автора - к правому. Картинка с описание располагается посреди текста большой статьи.
Название и имя автора:
- могут быть случайной длины
- случайное число строк
- выравниваются по верху
- всегда ограничиваются пределами изображения, расположенного выше
Можно ли как-то реализовать данную задачу, используя только HTML и CSS, учитывая что должна обеспечиваться поддержка всех современных браузеров и IE8+?
P.S. Я пробовал выравнивать блоки абсолютно, но в таком случае блоки выходят из потока и при числе строк больше 1, подсказка начинает наползать на текст статьи.
Также пробовал делать блоки содержащие описание и имя автора inline-block, в таком случае вроде бы все здорово - но если текст описания слишком длинный - имя автора вылазит за границы фото. При table-cell происходит аналогично inline-block.
Может быть я упускаю какой-то элементарный момент из виду в силу накопившейся за день усталости. Помогите, если не сложно с решением задачи ) Спасибо!
Средний
