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