절대 자식이있는 상대 상대 div

Question

이미지 상단에 이미지 캡션을 추가하려고합니다. 이 이미지들은 격자 모양의 시스템 (높이가 고정되지 않은 채)에 떠 있어야합니다. 여기에 만들어진 피들처럼 http://jsfiddle.net/thomasjonas/GzjuM/3/

당신은 이미 문제를 볼 수 있습니다 ... 제목과 이미지의 절대적인 위치 때문에 상대 항목 div 내부에서 상대 항목 div는 적절한 높이를 얻지 못하고 테두리의 높이 만 가져옵니다. 어떻게 해결할 수 있습니까? 나는 어디에서나 답을 찾았지만 대부분 다른 방법을 사용하여 다른 사람들의 문제를 해결했습니다. 내 문제에 대해 알고있는 유일한 다른 접근 방식은 이미지를 div의 배경으로 사용하는 것이지만 내 이미지의 너비와 높이를 알아야합니다 ...이 문제의 가장 좋은 해결책은 무엇입니까?

Answer 1

이미지의 절대 위치를 지정하지 마십시오. (당신이 어딘가에 div 스타일을 변경 한 경우 display:block 사용) 대신 블록으로 <div class="image"> 요소를 렌더링 절대 위치 손보는 대신 마진을 설정 :

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

JSFiddle