css - 当浏览器尺寸减小时，只有第一张图片留在 View 中

Question

我在一个 div 中水平放置了一系列图像。

目标是随着浏览器变小，图像也变小，所以它们都是可见的并保持内联。

目前，只有第一张图片会保持可见，而其他图片则不可见。 (虽然所有的图片都变小了。

这是 JSFiddle:http://jsfiddle.net/KXGUM/

您会注意到，如果您将浏览器缩小，图片会变小，但只有第一个会留在 View 中，其他的您必须向右滚动才能看到。

我希望它们仍然可见，这意味着它们必须一起收缩。

CSS:

body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: auto; white-space: nowrap; max-width: 100%; width: auto; }
img {max-width: 100%; height: auto; display: inline-block; width: auto;}

Answer 1

因为你有 3 张图片，它们的宽度应该是父容器的 33%。将 100% 更改为 33%，它们全部显示在屏幕上并排成一行。

img {max-width: 33%; height: auto; display: inline-block; width: auto;}

参见此处:http://jsfiddle.net/KXGUM/1/