带有 :nth-child CSS 的浮动缩略图跳过一列答案

【问题标题】：Floating thumbnails with :nth-child CSS skipping a column带有 :nth-child CSS 的浮动缩略图跳过一列
【发布时间】：2019-03-23 11:32:50
【问题描述】：

我有一个浮动缩略图库，我希望它与包含 div 的两侧齐平，但它们之间有空格。

JSfiddle 所需的行为。

相关CSS：

.thumb {
  display: block;
  float: left;
  width: calc((100% - 72px)/3);
  margin-top: 18px;
  margin-right: 36px;
  transition: opacity 750ms ease-in-out;
  }

    @media screen and (max-width: 1553px) {

      .thumb:nth-child(3n+3) {
        margin-right: 0;
        }

    }

    @media screen and (min-width: 1554px) and (max-width: 2059px) {

      .thumb {
        width: calc((100% - 108px)/4);
        }

      .thumb:nth-child(4n+4) {
        margin-right: 0;
        }

      }

    @media screen and (min-width: 2060px) {

      .thumb {
        width: calc((100% - 144px)/5);
        }

      .thumb:nth-child(5n+5) {
        margin-right: 0;
        }

      }

在 OSX 上的 Chrome 和 Firefox 中，在某些分辨率下（例如 1024 像素），第 13 个缩略图在容器中居中，并使所有 :nth-child 样式失控，破坏了下面的布局。我更改了缩略图的顺序，但始终是第 13 个。考虑到它可能与 calc() 除法产生的像素分数有关，我从缩略图的宽度中减去了 1px，也没有运气。

我没有看到我在 JSfiddle 和 WIP 站点中所做的任何相关差异。我做错了什么？

【问题讨论】：

我认为这些媒体库应该可以工作。
道歉。该错误与 CSS 无关。有些图像比其他图像高 1 像素。

标签： css

【解决方案1】：

这不是你真正的答案，但我认为你对自己越来越难了！
有非常酷且简单的方法来创建您想要的内容。
我建议您阅读有关Foundation Block Grid 和FlexBox 的更多信息。
不要试图重新发明轮子。

【讨论】：