怪異響應佈局

Question

當在肖像模式中的移動電話觀看時，圖像被顯示每行兩列與具有50％的寬度的各圖像容器。

雖然有時，你只能得到每行一個圖像。這似乎完全是隨機的！ 如果翻蓋手機橫向模式時，圖像顯示每行3列，一切工作正常。

這裏有一個形象，你能明白我的意思：

正如你可以看到眼鏡蛇手套全都在自己的！如果您調整窗口大小，那麼您可以在Firefox中複製該問題，以便每行只能獲得2個圖像。

如果您轉到http://www.snowrepublic.co.uk/並點擊頁面底部的「切換到手機」按鈕（黑色手機查看圖標），然後選擇您可以看到的「手套」類別。奇怪的是，如果你點擊「防彈衣」類別，完全相同的佈局完美的作品。

Answer 1

您的問題是由於您的.centeredContent元素沒有高度以及其中一個框中內容較少的事實引起的，因此它下面的框會稍微跳起來（這是浮動元素的正常行爲）。

要修復它給.centeredContent將容納最可能的內容的高度。在你的情況下，260px似乎已經足夠：

.centeredContent { 
    ... 
    height: 260px; 
}