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