我正在尝试构建一个具有一致垂直节奏的2列布局(对齐的基线).对此的计算非常简单,我让它们正常工作.我的问题是：

当两列文本并排放置时,当列中的垂直边距不是“整行”时,是否可以保持(或重新获得)垂直节奏.

在这个例子中：http://jsfiddle.net/beejamin/PMCXt/我有一个无序列表,其中列表和列表项都有margin-bottom的“半行”.当有一个偶数个列表项时,边距加起来整行,节奏保持不变(这很好！).当有一个奇数时,基线被抛出,并且不能再次加入(除非我很幸运,另一个奇数列表出现).

设置列表项的整行边距太多(特别是长列表),设置无边距是不够的.

有什么方法可以避免/减轻这种情况吗？我不会提前知道行数,我不想使用javascript(我正在尝试构建一个我可以重用的通用方案).

最佳答案 好的,所以这是一个纯CSS解决方案.它依赖于：nth-​​child和：last-child选择器,因此只有支持这些选择器的浏览器才会这样做.这对我来说已经足够了,因为它真的只是一个很好的抛光.使用一些javascript也很容易申请旧浏览器.

这是工作示例：http://jsfiddle.net/beejamin/DpSzW/

关键是这个选择器：

li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}

只要最后一个孩子也是奇数孩子,这就会为列表的最后一个子项添加一个完整行的边距.全线余量取代了物品通常具有的半线,因此恢复了垂直节奏.基本上,它使任何列表总是占用整行数.

当列表具有偶数个项目时,选择器不执行任何操作,并且一切都保持良好状态.