css - 在响应式网格中连续显示图像时，如何使图像保持相同的高度/宽度？

Question

我有一个固定宽度的基于百分比的网格(暂时)。该代码基于这篇 css-tricks 文章:http://css-tricks.com/dont-overthink-it-grids/

效果很好，直到我有一个包含多个大小相同且需要彼此相邻堆叠( float )的响应图像的列。由于填充问题和其他问题，我无法让所有三幅图像都具有相同的宽度和高度，尽管事实上它们是这样开始的。最后一个总是更高。这是显示问题的代码笔:http://codepen.io/joshmath/pen/dEuIv

如能提供任何帮助，我们将不胜感激。我以前遇到过这个问题，但最终总是根据具体情况解决问题。谢谢!

Answer 1

无论出于何种原因，如果您从最后一个元素中删除 padding-right: 0 样式，问题就会得到解决。

看起来您正在尝试使用填充在元素之间添加间距。我尝试使用 Chrome 开发工具来代替填充，然后将元素的宽度略微减小到 29.5% 左右。这似乎奏效了。