漂浮在另一个上面

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

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

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

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

Answer 2

将margin-right: -30px;放在.enterieInfo上。

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