首先，为了非常清楚，这里有一个 JS fiddle 展示了我想要实现的目标：
http://jsfiddle.net/bb_matt/VsH7X/
这是解释-我的理由：
我正在使用 1140 网格框架创建一个响应式站点。这是一个相当复杂的布局。
我创建了一个可重复使用的简单画廊类，它可以放入任何定义的列大小并使用媒体查询，我将相关的百分比宽度应用于 li 元素。每个 li 元素的右边距为 5%。我在媒体查询中使用 nth-child(xn+x) 来删除每行末尾的右边距。
一切正常 - 图像随着布局调整大小而调整，连续画廊项目的数量正如我根据百分比定义的那样工作。
唯一需要解决的问题是在行之间清除。我无法添加额外的 html 标记，并且我想避开过于复杂的 jquery 修复。
我知道解决这个问题的两种方法，但我并不热衷于其中任何一种。
第一个修复，简单地在 li 元素上使用 display: inline-block ，顶部垂直对齐，一切都会正确流动......但是，所有百分比都会被拍摄，并且画廊项目不再整齐地适合分配的空间。
第二个修复，给列表项一个高度。如果有必要，我会沿着这条路线走——它需要不同的高度，具体取决于分辨率——没什么大不了的，但不是那么整齐。