怪异的响应式布局

Question

在纵向模式下在手机中查看时，图像每行显示两列，每个图像容器的宽度为50％。

有时候，每行只能获得一张图片。看起来完全随机！ 如果您将手机翻转为横向模式，图像每行显示3列，一切正常。

这是一张图片，所以你可以看到我的意思：

正如你所看到的那样，眼镜蛇手套都是独一无二的！如果您调整窗口大小，则可以在Firefox中重现该问题，因此每行只能获得2个图像。

如果您转到http://www.snowrepublic.co.uk/并点击页面底部的“切换到移动设备”按钮（黑色手机图标），请选择您可以自己查看的“手套”类别。奇怪的是，如果你点击“防弹衣”类别，完全相同的布局效果很好。

Answer 1

你的问题是由于你的.centeredContent元素没有高度这个事实，当其中一个框中的内容较少时，它下面的框会跳起一点（这是浮动的正常行为）元素）。

要修复此问题，请为.centeredContent提供一个可容纳最多内容的高度。在您的情况下，260px似乎就足够了：

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