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

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

クリストファー・マーシャルに殴られる。またはどちらかが機能するはずです。