CSS网格项，具有均匀水槽和全宽网格

我正在制作一个布局，其中包含一个类似网格的布局，以展示一组产品。以下是我努力实现的目标：

我的问题是，我似乎无法在这个网格内获得均匀和冲洗的排水沟。以下是我目前掌握的情况：

HTML:

我正在使用

右键填充：20pximg.offer

）。由于这些报价都是内联的，我似乎无法让每一行与主栏的右侧对齐（用手与较大横幅的右侧对齐）

我很想用纯CSS实现这一点，但我逐渐意识到这可能不会发生。我会尝试

：nth child（3n）

，但缺乏IE支持对我来说是个破坏者

我没有办法使用服务器端处理器来计算网格项的数量。我知道我可能只想使用javascript或jquery来做这个计算，但我想看看是否有人有其他建议

TLDR：帮我弄到排水沟和全宽格栅

---

谢谢大家

您可以使用

img.offer:nth child（3n）{padding right:0；}

这将消除每3个img右侧的填充

我不知道您的容器的宽度，但这可能会有帮助：

.offer {
    /* some stuff */
    padding-right: 25px; /* You have to find a good value */
}
.offer:nth-child(3n) {
    padding-right: 0;
}

---

如果您不想使用

nth-child（）

，您也可以为每3张图像（.offer）提供一个额外的类。

''为IEThanks@ashley提供一个替代方案！这让我更接近了。我只需要找出正确的组合。它的方向是正确的，直到我意识到它不会重复，并且只针对一个特定的元素。谢谢你的建议！由于我找不到任何仅CSS的解决方案，我已经恢复到只在第三项上打类。感谢您第n个孩子（3n）的建议！

div#content div#main div.offers img.offer{ padding-top:20px; padding-right: 20px; }

.offer {
    /* some stuff */
    padding-right: 25px; /* You have to find a good value */
}
.offer:nth-child(3n) {
    padding-right: 0;
}