水平顯示時元素之間的CSS間距

我有一個可以動態生成頂級照片貢獻者列表的小部件組件。通常它在邊欄中，因此它將前三名的照片撰稿人疊加在一起，每張照片都有三張照片。該佈局與以3 x 3網格顯示其內容的其他照片小部件相似。水平顯示時元素之間的CSS間距

有時小部件可能會顯示在主列中，因此爲了讓小部件容易適應更廣闊的空間，我將display屬性設置爲inline-block。這樣，它們可以垂直堆疊在側欄上，並且可以水平地堆疊在主列上。不過，我希望在水平放置時各個貢獻者之間存在分離，所以我添加了10px的右邊距。

CSS迄今爲止 -

div { 
    display: inline-block; 
    margin-right: 10px; 
}

所以這裏的問題 - 當我包括10px的邊緣，一個非常小範圍的窗口寬度時，10px的利潤率會引起Widget崩潰到兩行圖片和下面的一個，而其餘的照片小部件保持3x3，因爲他們沒有餘量。

[] [] []

到

[] []

[]

如何將我得到這些團體三種圖片時水平放置有一個保證金，但垂直佈局時沒有保證金？

來源

2015-02-24 Shantanu Swaminathan

您是否可以包含一個JSFiddle來爲我們複製您的問題 - 使其更易於測試，更新併爲您提供答案。 – Alex 2015-02-24 22:01:32

要麼減少widget的寬度，要麼增加容器的大小？ – sebnukem 2015-02-24 22:02:18

您可以使用last-child選擇：

div { 
    display: inline-block; 
    margin-right: 10px; 
} 

div:last-child { 
    margin-right: 0 
}

來源

2015-02-24 22:01:41 fred02138

雖然這肯定會給我一個元素之間的餘量，但它不會解決任何元素在邊欄垂直堆疊時沒有邊距的問題：/ – 2015-02-25 21:30:21

根據您的描述，您的視口決定了佈局。您可以使用CSS3根據視口大小控制佈局。

@media(max-width:679px) { 
#img-group{ 
    display: block; 
    margin: 0; 
} 
@media only screen and (min-device-width: 680px) and (max-device-width: 960px), only screen and (min-width: 680px) and (max-width: 960px) { 
    display: inline-block; 
    margin-right: 10px; 
}

來源

2015-02-24 22:03:12

水平顯示時元素之間的CSS間距

回答

相關問題