Question

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

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

例如：假设，5个缩略图之间有空格，大约需要2000像素。现在我正在调整窗口大小。当页面宽度变为＆lt; 2000 px但是＆gt; 1600像素我想连续显示4个缩略图，依此类推。

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

Answer 1

一种方法是使用响应式布局。 Twitter Bootstrap默认提供相同的内容。

另一种方法是使用@media标签。请参阅http://www.w3schools.com/css/css_mediatypes.asp。在这里，您需要创建一个这样的函数：使用mediacheck获取屏幕尺寸，然后使用@media设置阈值。

Answer 2

您可以使用float property：

float: left;

浮动元素在它们不适合父级宽度时会换行。

Example（尝试调整页面大小）

Answer 3

我曾经做过fiddle向某人解释媒体查询。您可以使用类似的设计，虽然通常只需要float:left或display:inline-block元素，然后让浏览器处理其余部分。