Html 具有相同宽度和静态边距的水平对齐图像？

我正试图为我正在进行的一个项目创建一个响应迅速的图像库，但我遇到了一些麻烦。对于该网站的移动版，我希望画廊的每一行都有三个相同宽度的缩略图和一个15px的边沟。当然，我可以通过使每个图像的宽度为33.33%来让它们占据相等的空间，但是我尝试应用于行中前两个图像的15px右边距将第三个图像推掉。有什么解决方案吗？

根据需要支持的浏览器，您可以使用：

width: calc(33% - 15px);
margin-right: 15px;

这应该可以解决最后一个图像滚动到下一行的问题，但是没有任何示例代码，这不容易证明。你能提供提琴或密码笔吗

---

编辑：共享Codepen.io后

---

因此，当我得到代码时，我注意到最后一个孩子而不是第一个孩子被混淆了，并且图形边距没有被覆盖。在解决了这两个问题之后，我在行的前两个数字上加了一个边距，并用calc（33.333%-10px）设置了宽度（为什么在代码注释中解释了10）。这解决了问题。

您有包装器吗？您可以使用伪类来选择最后一个。.包装器img:last child{margin right:0；}问题是前两个边距会将第三个图像推掉。我尝试使用calc（33.33%-15px）考虑到页边空白，但上一张图片的计算结果被忽略，使其更宽更高。我现在有点生疏，所以我可能遗漏了一些明显的东西。我在收到这个答案时，实际上对这张图片进行了评论。虽然calc在前两张图片中正确地完成了这项工作，但第三张图片仍然是一个问题。如果我离开计算器，图像将无法与屏幕的右边缘正确对齐；但是，如果我删除计算器，图像将太大。如果有帮助，我会在一秒钟内将代码扔到某个地方。你能在JSFIDLE或codepen.io中重现此问题吗？如果没有剩下的代码，我只能猜测。这是标记和CSS f或者画廊。我正在用低于500px的浏览器宽度进行测试；我知道它在任何更大的宽度下看起来都很糟糕。我将它从.sass切换到了.scss，它似乎可以工作。哦，天哪，我现在显然连简单的数学都不会做。非常感谢！