响应式缩略图网格调整宽度

Question

当宽度变化时，自动调整大小的响应式缩略图网格必须非常容易。但我所看到多种方式如何缩略图网格是由一些使用排序列表结构：

<ol> 
<li><img scr=""/></li> 
<li><img scr=""/></li> 
</ol> 

其他只使用一个div和IMG结构等什么是让格缩览图的最佳方式？

在我的示例中，我将内容集中在浏览器中，最大宽度为750px，我希望放置5个方形缩略图，以填充该空间的100％，并在宽度更改时自动调整大小。另外我想玩他们之间的空间添加空间或删除所有空间，然后决定，但保持100％的宽度的内容区域，并增加内容文本之间的顶部和底部的空间。

这里是Fiddle

Answer 1

不要紧，不管你使用的DIV或无序甚至是有序列表。我倾向于为这种情况选择一个无序列表，因为它对我而言在语义上是合适的。但是布局魔术发生在你的样式表中。

为什么我用列表的一个原因是，它往往就派上用场了，你得到的

• 列表层次​​
  • 项目
    • 内容

因此，您可以使用列表项目大小与容器相关的容器列表（在您的案例中为20％），而每个列表项目的内容可以根据其列表项目父项进行布局。你可以在列表中浮动列表项（所以不要忘记在伪元素之后清除float）或将显示设置为内联块（然后你必须将列表中的LI标签之间的任何空格去掉防止任何缺口）。

提示：作为相对垂直填充是相对于总是计算父元素的宽度（不高度！），它可以让你给每个列表项固定宽/高比。由于您希望缩略图为正方形，因此可以将列表项目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排水沟）/ 5项）。每个列表项的：第n个孩子（5n）必须将其边距权设置为0才能使其工作。

只要你想固定天沟，它变得越来越棘手。我通常会在fiddle中执行某些操作，并可能需要添加标记（我添加了链接标记）。水平间距通过列表项的填充（项目有box-sizing: border-box;），通过边距的垂直间距来定义。列表容器两边都有负边距。检查样式。