html - 具有绝对子代的浮动相对 div

Question

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

已经可以看出问题了...由于title和image在relative item div里面的绝对定位，relative item div没有得到合适的高度，只是边框的高度...解决这个问题？我到处寻找答案，但大多数时候其他人的问题都是用不同的方法解决的。对于我的问题，我知道的唯一其他方法是使用图像作为 div 的背景，但是我需要知道图像的宽度和高度......这个问题的最佳解决方案是什么？

Answer 1

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

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

JSFiddle