3 种尺寸的图像列表答案

【问题标题】：List of images in 3 sizes3 种尺寸的图像列表
【发布时间】：2018-05-16 13:15:52
【问题描述】：

我有一张图片列表。它们有 3 种尺寸：大号、中号和小号。 Large 是 Small 的 3 倍（间距 + 一点），Medium 是 Small 的 2 倍（间距 + 一点）。在此示例中，Large 为 160x160 像素，Medium 为 105x105 像素，Small 为 50x50 像素。

我希望首先显示所有大尺寸，然后显示所有中尺寸，然后再显示所有小尺寸。但我希望列表填满整个屏幕，这意味着任何地方都不应该有空格（最后一张图片之后除外）。

所以我想要这个：

但如果我只是尝试使用此代码 (code also in jsfiddle)：

<img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">

然后我得到这个结果：

Sooo，我应该如何编写 html/css 以获得我想要的结果？

注意：我正在寻找与屏幕宽度无关的解决方案。

【问题讨论】：

如果您愿意，可以使用 Flexbox 或网格布局。

标签： html css

【解决方案1】：

您可以通过使用float:left 并将图像放入容器中以使其正确堆叠来实现此目的：

.container {
  width: 605px;
}

.container:after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  clear: left;
}

img {
  float: left;
  margin: 0 5px 5px 0;
  display: block;
}

<div class="container">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
</div>

【讨论】：

这有固定的宽度。我应该指定这一点，但我一直在寻找一种独立于屏幕宽度的更自动适应的解决方案。

【解决方案2】：

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

看看这个JSFiddle。

代码

img {
  float: left;
  margin: 0px 5px 5px 0;
}

<html>
<body>

  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">

</body>
</html>

结果

【讨论】：

这个有一个问题。我无法在评论中添加图片，但如果你让 jsfiddle 输出的宽度变小，那么你会看到不需要的空格。
当宽度可以包含两个蓝色图像和一个绿色图像时会发生这种情况......

【解决方案3】：

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

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 55px);
    grid-auto-rows: 55px;
    grid-auto-flow: row dense;
}

.big {
    grid-column: span 3;
    grid-row: span 3;
}

.mid {
    grid-column: span 2;
    grid-row: span 2;
}

<div class="container">
<img class="big" src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img class="big" src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img class="mid" src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img class="mid" src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
</div>

【讨论】：