Html 在另一个上面浮动一小片

嗨

我尝试用相册图像和一些信息创建专栏。 我希望信息覆盖在它旁边的图像上一点点。 如图所示：

然而，要么我打破浮动左或文本得到的图像顶部的总和等。 喜欢一切，除了想要的结果

一些帮助会很好，这里有一个JSFIDLE：

代码的一小部分：

<div class="entrie">
                <img class="entrieImage" src="http://doekewartena.nl/temp/images/img02.png"/>

                <div class="entrieInfo">
                    <div class="band">Kids for Cash</div>
                    <div class="album">No More Walls E.P.</div>
                    <div class="label">...</div>
                    <div class="year">1986</div>
                    <p>-</p>
                    <div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
                    </div>
                </div>

            </div>

---

应该每秒钟一次。输入div并在左侧设置一个负边距，在上一个div下面设置一个z索引。可能混淆了我的伪选择器。

将

边距设置为右侧：-30px打开
。输入ieinfo

被克里斯托弗·马歇尔击败。或者应该起作用。
在旧版本的IE中，使用伪选择器会出现问题。只是不确定您是否将拥有两个以上的.entrie div:}否则您可以向第二个entrie div添加第二个/语义类，并将其用作选择器。可能会有更多的项，而不仅仅是两个项，而且屏幕会变宽。它可能是3x2或3x8等。Atm您的解决方案在第二行的排列非常糟糕。内容是动态的吗？如果没有，您可以添加一个.second类并使用相同的样式。您的方法使用aligment效果更好。我只是无法完成z索引
.entrie {
    float: left;
}

.entrieInfo {
    width: 200px;
    float: left;
    margin-left: 10px;

}

.entrieImage {
    /* if you only set the width then the height will be set automaticly proportional*/
    width: 300px;
    float: left;
}

   #entries .entrie:nth-of-type(2n) {
            margin-left: -41px;
            position: relative;
            z-index: -1;
        }