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

Question

我正在尝试为我正在处理的项目创建一个响应式图片库，但我遇到了一些麻烦。对于网站的移动版本，我希望图库的每一行都有三个宽度相等的缩略图和一个15px的装订线。当然，我可以让图像占据相同的空间，每个图像宽33.33％，但是我试图应用于行中前两个图像的15px右边距推动了第三个图像。任何解决方案？

Answer 1

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

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

http://caniuse.com/#feat=calc

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

---

编辑：共享Codepen.io后

http://codepen.io/anon/pen/mkjzd

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