浮动缩略图：第n个子CSS跳过列

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

期望的行为

相关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中，在某些分辨率（如1024px）下，第十三个缩略图将自己集中在容器中，并将所有第：n个子样式置于不正常的位置，打破了下面的布局。我改变了缩略图的顺序，但总是第十三个。我认为这可能与calc（）除法得到的像素分数有关，所以我从缩略图的宽度中减去了1px，也没有运气

---

我在JSFIDLE和WIP站点中所做的工作没有任何相关区别。我做错了什么？

好吧，这不是你真正的答案，但我认为你正在变得难以自拔
有非常酷和简单的方法来创造你想要的东西。
我建议您阅读更多关于和的信息。

---

不要试图重新发明轮子。

我认为这些媒体夸夸其谈应该管用。抱歉。这个bug与CSS无关。其中一些图像比其他图像高1倍。