css - 奇怪的响应式布局

Question

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

但有时，每行只能获得一张图像。这似乎完全随机！如果将手机翻转到横向模式，图像每行显示 3 列，一切正常。

这是一张图片，因此您可以了解我的意思：

如您所见，眼镜蛇手套是完全独立的！如果您调整窗口大小以使每行仅获得 2 张图像，则该问题可以在 Firefox 中重现。

如果您访问http://www.snowrepublic.co.uk/并点击页面底部的“切换到手机”按钮（黑色手机外观图标），然后选择您自己可以看到的“手套”类别. 奇怪的是，如果您点击“防弹衣”类别，完全相同的布局可以完美运行。

Answer 1

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

要修复它，请给出.centeredContent一个可以容纳最多内容的高度。在你的情况下 260px似乎就足够了：

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