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