漂浮與絕對兒童的相對div

Question

我試圖在圖像頂部添加圖像標題。這些圖像應該像網格一樣浮動（沒有固定的高度！），就像我在這裏製作的小提琴一樣http://jsfiddle.net/thomasjonas/GzjuM/3/

您已經可以看到問題......由於標題和圖像的絕對定位在相關的item div中，相關的item div沒有得到合適的高度，而只是邊界的高度......我該如何解決這個問題？我到處尋找答案，但大多數時候其他人的問題都是用不同的方法解決的。我唯一知道的問題就是使用圖像作爲div的背景，但是我需要知道圖像的寬度和高度......這個問題的最佳解決方案是什麼？

Answer 1

不要將圖像置於絕對位置。相反，呈現<div class="image">元素塊（使用display:block如果你的地方改變了div風格），併成立了保證金，而不是絕對定位擺弄：

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

JSFiddle