浮动相对div与绝对孩子

Question

我正在尝试在图片顶部添加图片标题。这些图像应该漂浮在类似网格的系统中（没有固定的高度！），就像我在这里制作的小提琴一样http://jsfiddle.net/thomasjonas/GzjuM/3/

你已经可以看到问题...由于标题和图像在相对项目div中的绝对位置，相对项目div没有获得适当的高度，而只是边框的高度...我怎样才能解决这个问题？我到处寻找答案，但大多数时候，其他问题都是用不同的方法解决的。对于我的问题，我唯一知道的另一种方法是使用图像作为div的背景，但是我需要知道图像的宽度和高度...这个问题的最佳解决方案是什么？

Answer 1

请勿将图像置于绝对位置。而是将<div class="image">元素渲染为块（如果您在某处更改了display:block样式，则使用div）并设置边距而不是摆弄绝对定位：

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

JSFiddle