Html 3种尺寸的图像列表

我有一张图片列表。它们有三种尺寸：大、中、小。大尺寸是小尺寸的3倍（+间距稍大），中尺寸是小尺寸的2倍（+间距稍大）。在本例中，大的是160x160像素，中的是105x105像素，小的是50x50像素

我想先显示所有的大屏幕，然后显示所有的中屏幕，然后显示所有的小屏幕。但是我想让列表填满整个屏幕，这意味着任何地方都不应该有空白（除了最后一张图片之后）

所以我想要这个：

但是如果我只是简单地使用以下代码（）：

---

使用

浮动

很容易回答这个问题。通过浮动所有剩余的图像，您将获得所需的外观

看看这个

代码

img{
浮动：左；
保证金：0px 5px 5px 0；
}

---

使用

浮动

很容易回答这个问题。通过浮动所有剩余的图像，您将获得所需的外观

看看这个

代码

img{
浮动：左；
保证金：0px 5px 5px 0；
}

---

您可以通过使用

float:left

并将图像放入容器中使其正确堆叠来实现这一点：

.container{
宽度：605px；
}
.货柜：之后{
内容：''；
显示：块；
身高：0；
溢出：隐藏；
清除：左；
}
img{
浮动：左；
边距：0 5px 5px 0；
显示：块；
}

---

您可以通过使用

float:left

并将图像放入容器中使其正确堆叠来实现这一点：

.container{
宽度：605px；
}
.货柜：之后{
内容：''；
显示：块；
身高：0；
溢出：隐藏；
清除：左；
}
img{
浮动：左；
边距：0 5px 5px 0；
显示：块；
}

---

显示网格可以很好地解决这一问题：

.container{
显示：网格；
网格模板列：重复（自动填充，55px）；
网格自动行：55px；
网格自动流动：行密集；
}
.大{
格构柱：跨度3；
网格行：跨度3；
}
.中{
格构柱：跨度2；
网格行：跨度2；
}

---

显示网格可以很好地解决这一问题：

.container{
显示：网格；
网格模板列：重复（自动填充，55px）；
网格自动行：55px；
网格自动流动：行密集；
}
.大{
格构柱：跨度3；
网格行：跨度3；
}
.中{
格构柱：跨度2；
网格行：跨度2；
}

如果需要，可以使用Flexbox或网格布局。如果需要，可以使用Flexbox或网格布局。这有一个问题。我无法在注释中添加图像，但是如果您将JSFIDLE输出的宽度减小，那么您将看到不需要的空格。当宽度可以包含两个蓝色图像和一个绿色图像时，就会出现这种情况……这是一个问题。我无法在注释中添加图像，但是如果您将JSFIDLE输出的宽度减小，那么您将看到不需要的空格。当宽度可以包含两个蓝色图像和一个绿色图像时，会出现这种情况……这具有固定的宽度。我本应该指定这个，但我一直在寻找一个独立于屏幕宽度的更自动化的解决方案。它有固定的宽度。我应该指定这个，但我正在寻找一个独立于屏幕宽度的更自动化的解决方案。