css - 使用媒体查询调整流动网格每行的图像数量

Question

我正在使用下面的代码，以便我的图像排列从一行 5 张调整为 4 张，然后根据容器的不同宽度调整为 2 张。

在第一个实例中，它正确地设置了每 5 个图像(每行的最后一个)，因此它没有右边距。当它缩小到每张图片有 4 张时，它会发生变化，因此每第 4 张图片都没有右边距，但由于某种原因，第 5 张图片仍然没有右边距。此外，当它捕捉到每行 2 张图片时，第 5 张仍然没有右边距。

我需要改变什么来阻止这种情况发生？在此先感谢您的帮助。

@media (max-width: 1200px) {
  #photos img {
  /* 5 images wide */
  width: 18% ; margin: 0 2.5% 2.5% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

@media (max-width: 400px) {
  #photos img {
  /* 2 images wide */
  width: 48% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(2n) { margin: 0 0 4% 0; }
}

编辑:这是一个JSFiddle - 我添加了比下面所列的更多的媒体查询，但问题仍然存在。

Answer 1

您为 max-width:1200px 定义的属性同时用于 max-width:800px 和 400px。

你必须重新定义你的:nth-child(5n)

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(5n) { margin: 0 4% 4% 0; }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

也许在查询中定义一个最小宽度会更好

@media (min-width:800px) and (max-width: 1200px) {
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

因此当屏幕尺寸介于 1200 和 800 之间时，仅应用边距。