對齊3個圖像在一個div，左中右，邊緣參差不齊

我能找到一個變通的，如果我想，但它似乎是錯誤的，我試圖瞭解代碼的更合適的方法。基本上我有與它3個圖像股利，股利爲700像素，並且每個圖像是220px，所以這就是660px用留下了兩個20像素的差距和中心圖像的右側，並一路將他們的最終外部圖像的div。對齊3個圖像在一個div，左中右，邊緣參差不齊

有沒有更快的方式做到這一點，而不是爲每個圖像設置單獨的ID？

.contentpictureblock { float:left; } 

.contentpictureblock img { 
margin-right:20px; 
} 

<div class="contentpictureblock"> 
<img src="http://..."> 
<img src="http://..."> 
<img src="http://..."> 
    </div>

這樣做^推動第三個圖像到下一行，這是可以理解的。我知道我總是可以爲每個圖像製作獨立的div，並調整每個圖像的邊距，但是我只是想知道是否有更快的溢出類型命令可以應用於上述情況？這意味着所有圖像都有正確的邊距，但對最後一幅圖像的定位沒有影響。

感謝您的幫助。

<img src="..." class="last">

CSS規則：

來源

2012-09-09 Adrian

有一個附加的類修改的最後一個圖像

.contentpictureblock img.last { 
margin-right: 0; 
}

來源

2012-09-09 21:39:45 leepowers

感謝李，使得它更簡單，整潔！ – Adrian

你也可以看看了'：最後child'僞類（http://www.w3schools.com/cssref/sel_last-child.asp），但對於一個跨瀏覽器解決方案添加額外的類也是這樣我會去 – Pevara

使用最後一子選擇：在div.contentpictureblock

.contentpictureblock img { 
    margin-right: 20px; 
} 
.contentpictureblock img:last-child { 
    margin-right: 0; 
}

來源

2012-09-10 00:35:40

切緣陰性也會這樣做。如果有，你將有超過3個圖像的可能性，那麼這就是你想要做什麼。

div.contentpictureblock { margin-left: -20px; overflow: hidden }

來源

2012-09-10 02:49:09 cimmanon

對齊3個圖像在一個div，左中右，邊緣參差不齊

回答

相關問題