制作响应式缩略图网格必须非常容易，当网格宽度发生变化时，该网格会自动调整大小。但我已经看到了使用有序列表结构制作缩略图网格的多种方法：
<ol>
<li><img scr=""/></li>
<li><img scr=""/></li>
</ol>
其他人只是使用div和img结构，那么制作缩略图网格的最佳方法是什么？
在我的示例中，我将内容置于浏览器中心，最大宽度为750px，我想放置5个方形缩略图，填充100％的空间，并在宽度变化时自动调整大小。此外，我想玩它们之间的空间添加空间或删除所有空间，然后决定，但保持内容区域的100％宽度，并在内容文本之间的顶部和底部添加空格。
以下是Fiddle
答案 0 :(得分：0)
使用DIV或无序甚至有序列表无关紧要。我倾向于为这种情况选择一个无序列表，因为它在语义上适合我。但布局魔术发生在你的样式表中。
我使用列表的原因是，您通常会派上用场
因此，您可以使用列表项大小所涉及的容器列表（在您的情况下为20％），而每个列表项的内容可以相对于其列表项父项布局。你可以只列出列表中的列表项（所以不要忘记通过以下方式清除浮点数：after伪元素）或将显示设置为内联块（然后你必须取出列表中LI标签之间的任何空格来防止任何差距。）
提示：由于相对垂直填充总是相对于父元素的宽度（而不是 height ！）进行计算，因此它允许您为每个列表项提供固定宽度/身高比。由于您希望缩略图为正方形，因此您可以将列表项padding-bottom设置为与width: 20%相同的值。如果您不使用图像元素但使用背景图像，则此功能尤其有用。缺点是任何项目内容必须在项目中定位绝对。
我相应地改变了你的小提琴：http://jsfiddle.net/Lmmdj2yq/6/
只要列表项之间的间距也相对于列表容器，它只是一些数学。像例如这个updated fiddle中有5％。 5个项目之间有5个5％的天沟。因此设置margin: 0 5% 5% 0和width: 16%（=（100％ - 5％* 4个装订线）/ 5个项目）。每个列表项的：nth-child（5n）必须将其margin-right设置为0才能使其正常工作。
只要您想要固定排水沟，它就会变得更加棘手。我通常会在此fiddle中执行类似操作，并且可能需要添加标记（我添加了链接标记）。水平间距通过列表项的填充（项目具有box-sizing: border-box;），通过边距的垂直间距来定义。列表容器两侧都有负边距。检查样式。