将图像添加到流体网格（响应）布局列会在移动屏幕上混淆宽度

Question

每当我在一个流体网格布局列中放置图像时，我就会遇到这个相当奇怪的问题。当页面宽度超过400px时，页面宽度可以正确计算。但是当我将它缩小到400px宽以下时，页面保持相同的宽度，你必须左右滚动。

当我将宽度图像的容器设置为50％时，问题甚至会持续存在。图像及其容器缩小，但包含图像容器的div仍然会超出屏幕宽度。如果我设置display：none;在图像上，或完全删除它，问题消失了，页面的宽度正确适合屏幕。

谢谢！

页面：http://cdhinternational.org/index3.html我在底部的图片时遇到问题。 （Firefox中的响应式设计模式是重现问题的好方法。只需将其设置为320x480px。）

Answer 1

您需要设置内容容器的宽度。

#content-container { width: 100%; }应该这样做。

P.S。内容容器浮动的任何特殊原因？如果您从内容容器中删除float: left;也应该这样做。