Плавающие относительные divs с абсолютными детьми

Question

Я пытаюсь добавить заголовок изображений поверх изображения. Эти изображения должны плавать в сетчатой ​​системе (без фиксированной высоты!), Как в скрипте, которую я сделал здесь http://jsfiddle.net/thomasjonas/GzjuM/3/

Вы уже можете увидеть проблему te ... Из-за абсолютного позиционирования заголовка и изображения внутри относительного элемента div, относительный элемент div не получает соответствующую высоту, а только высоту границы ... Как я могу это исправить? Я искал ответы повсюду, но в большинстве случаев проблемы других решаются с использованием другого подхода. Единственный другой подход, который я знаю по моей проблеме, - это использование изображения в качестве фона для div, но тогда мне нужно знать ширину и высоту моего изображения ... Какое лучшее решение для этой проблемы?

Answer 1

Не устанавливайте изображения в абсолютном порядке. Вместо того, чтобы оказывать <div class="image"> элементов, как блок (с помощью display:block если вы изменили свой стиль div где-то) и создать запас вместо возился с абсолютным позиционированием:

.item .image{ 
    display:block; 
    margin-top: 1em; 
    margin-left: 1em; 
} 

JSFiddle