html - 调整页面大小时调整缩略图

Question

假设我在网页中显示缩略图(每个约 200 像素宽)。在中型屏幕(例如 15")中，我可以连续显示 5 个缩略图。

现在，如果我调整浏览器窗口的大小，使 5 个缩略图不适合页面宽度怎么办？我希望自动更改缩略图的数量以适合页面。

例如:假设 5 个中间有空格的缩略图占用大约 2000 像素。现在我正在调整窗口大小。当页面宽度变为 < 2000 px 但 > 1600 px 时。我想连续显示 4 个缩略图等等。

我应该使用什么 HTML/CSS 标记来实现该行为？

Answer 1

我曾经做过 fiddle向某人解释媒体查询。您可以使用类似的设计，尽管通常只需将元素 float:left 或 display:inline-block 并让浏览器处理其余部分就简单得多。

DEMO