浮利爾位上的其他

嗨的頂部，

我嘗試創建與專輯圖片和一些信息列。我希望信息覆蓋它旁邊圖像上的一個小點。喜歡這個圖像：

然而，無論我打破浮動左或文字gety totaly在圖像等頂部等像所有除了預期的結果。

一些幫助將是巨大的，這裏有一個的jsfiddle：

小塊代碼：

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

來源

2012-06-27 clankill3r

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

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

應採取每秒.entries div並在左側設置負邊距，並將z-index設置在前一個div的下方。可能混淆了我的僞選擇器。

來源

2012-06-27 20:50:34

在使用該僞選擇器的舊版IE中，您將遇到問題。只是不確定是否會有兩個以上的.entrie divs：}否則，您可以將第二個/語義類添加到第二個entrie div並將其用作選擇器。 –

可以有更多的只有2個項目，它會在寬屏幕上變寬。它可能是3x2或3x8等Atm您的解決方案在第二排非常糟糕。 – clankill3r

內容是否動態？如果不是，您可以添加.second類並使用相同的樣式。 –

把margin-right: -30px;在.enterieInfo。

克里斯托弗馬歇爾擊敗。無論是或應該工作。

來源

2012-06-27 20:52:19 smdrager

您的方法可以更好地對齊。我只能完成z-index http://jsfiddle.net/Scf4u/2/ – clankill3r

浮利爾位上的其他

回答

相關問題