0

我正在使用下面的代码，以便我的图像排列从连续 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 - 我添加的媒体查询比下面列出的多，但问题仍然相同。

4

1 回答 1

2

您为 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 之间时，仅应用边距。

于 2012-09-10T11:21:31.057 回答