在css中使用相鄰選擇器的邊距

Question

我試圖在絕對定位的div中顯示多個圖像。 div將文本對齊設置爲中心，這很好地將圖像放在中心。然後，我爲圖像添加了相鄰的兄弟選擇器的邊距左邊的規則，給它們一點空間，但不會搞亂所有居中的善良。

圖像是默認的靜態嵌入塊元素。

.mydiv img + img 
{ 
    margin-left:20px; 
} 

這給我的圖像之間彼此之間有點空間。但是，當圖像溢出div時，圖像堆疊在另一個上面時，邊距仍然適用，以便下面的圖像不垂直對齊。我想這是因爲他們仍然是兄弟姐妹，他們只是在視覺上分開。

是否有另一種方式來實現這個使用CSS？我的DIV是液體，所以我真的不希望使用固定的利潤率一路..

下面是一個例子形象：http://i54.tinypic.com/w8aogp.png

正如你所看到的，圖像的第二排和下面的偏移我希望在圖像之間保留空白。當然，我希望他們垂直排列。如果我能以某種方式使用一個選擇器來處理像「img前面有一個隱含的換行符」並刪除邊距？

不要介意「頂部」邊距 - 無論圖像是否與白色容器div相鄰，它都將是一個固定的數字。但是，我想要將img與容器div直接相鄰（視覺上）時將左邊距歸零。

Answer 1

如果你的父div有一個可變的寬度，並且你的圖像是浮動的，我認爲確保圖像間距相等的唯一方法是聲明margin: 10px（在所有方面），或者至少在左邊和右側。這樣，無論每行有多少張圖片，它們都會始終正確對齊。另一方面，如果父div的寬度固定，並且您確切知道每行有多少圖像，則可以爲每個X圖像插入一個空白的div，這將使您的當前選擇器按需要工作，或者您可以創建一個新的分隔符類，例如.sep，您將爲其聲明margin-left: 20px;並將其分配給除連續第一個圖像之外的所有分隔符類。

除此之外，我不認爲有任何其他純粹的CSS解決方案。