需要幫助讓圖像堆積在一個div內

我試圖讓一系列圖像堆疊在一個div上面，而我需要一些幫助。該div在CSS中設置爲450px寬，頂部圖片始終爲該寬度。隨後的圖像大小不同，需要在右側填充36px。需要幫助讓圖像堆積在一個div內

目前我的代碼看起來是這樣的：

<div id="photos"> 
    <img style="position:relative; top:0px; width:450px" src="images/picture1.jpg" /> 
    <img style="position:relative; top:0px; float:left; left:100px" src="images/picture2.jpg" /> 
    <img style="position:relative; top:0px; float:right; right:36px" src="images/picture3.jpg" /> 
</div>

不幸的是底部的兩張照片接下來要對方坐下。即使我在第二張照片後休息一下，他們仍然在同一個地方。

我試着將div設置爲display: block，但沒有改變。

來源

2013-07-24 Bierce Mountain

當你說「一個疊在另一個上面」時，你的意思是字面上彼此重疊還是每個在列的最後一個之後？ –

你能提供一張你希望他們堆疊的圖片嗎？ –

如果你希望他們堆棧，使用inline-block的 http://jsfiddle.net/jax29/

CSS

#photos{ 
width:450px; 
} 

#photos img{ 
display:inline-block; 
} 

#photos img:nth-child(n+2){ 
margin-right:36px; 
float:right; 
}

HTML

<div id="photos"> 
    <img src="http://i.imgur.com/siHvwSU.png" /> 
    <img src="http://i.imgur.com/siHvwSU.png" /> 
    <img src="http://i.imgur.com/siHvwSU.png" /> 
</div>

來源

2013-07-24 17:35:35 John

我會爲這件作品單獨行事......好吧，我想也是因爲它有效，但那是次要的。 – Gray

@showdev調整了那個css – John

我可能會誤解你想要什麼，但如果你想要的圖像垂直堆疊，從不水平，您可以在父div上設置text-align: right;而不是使用float: right來對齊圖像。

如果您想使用float: right;請在每張圖片上添加clear: both;。這樣，他們不會想要跳到前一張圖片旁邊。使用float告訴後續元素顯示在浮動元素旁邊。

來源

2013-07-24 17:41:03 Nick

感謝尼克，這解決了大部分問題。 'float：right'似乎是罪魁禍首。將會出現這樣的情況，我確實希望兩張圖像適合放在單個行上，以便將其刷新到最大圖像的頂部。我現在正在嘗試這樣做，但是較小的圖像正在沖刷到較大圖像的底部。任何想法爲什麼？ –

你能告訴我你是如何讓兩幅圖像相鄰顯示嗎？這可能與你的方法有關。 – Nick

這裏是一個[鏈接]（http://jsfiddle.net/CpN2X/）的例子，說明如何實現我認爲你在談論的內容。 – Nick

這應該符合您的要求。

<div id="photos"> 
    <img src="images/picture1.jpg" /><br /> 
    <img src="images/picture2.jpg" style="padding-right:36px;"><br /> 
    <img src="images/picture3.jpg" style="padding-right:36px;"> 
</div> 

#photos { 
    width: 450px; 
    text-align: right; 
}

來源

2013-07-24 17:43:32 Renegade91127

需要幫助讓圖像堆積在一個div內

回答

相關問題