html - 3 种尺寸的图像列表

Question

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

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

所以我想要这个：

但是，如果我只是尝试使用此代码（代码也在 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 以获得我想要的结果？

注意：我正在寻找一种独立于屏幕宽度的解决方案。

标签： htmlcss

Answer 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>