html - 在另一个之上浮动一点

Question

你好，

我尝试使用专辑图片和一些信息创建列。我希望信息在它旁边的图像上覆盖一点点。就像在这张图片上：

但是，要么我打破左侧浮动，要么文本完全位于图像等之上。等等。除了所需的结果之外的所有内容。

一些帮助会很棒，这是一个jsfiddle：

http://jsfiddle.net/Scf4u/

一小段代码：

<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>

CSS：

.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;
}

Answer 1

穿上。margin-right: -30px;_.enterieInfo

被克里斯托弗·马歇尔击败。要么或应该工作。

Answer 2

http://jsfiddle.net/Scf4u/1/

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

应该每隔一秒 .entries div 并在左侧设置一个负边距，并在前一个 div 下方设置一个 z-index。可能混淆了我的伪选择器。