4

我正在尝试构建具有一致垂直节奏（对齐基线）的 2 列布局。对此的计算非常简单，我让它们运行良好。我的问题是这样的：

当两列文本并排放置时，当列中的垂直边距不是“整行”时，是否可以保持（或恢复）垂直节奏。

在此示例中：http: //jsfiddle.net/beejamin/PMCXt/我有一个无序列表，其中列表和列表项都有“半行”的边距底部。当列表项为偶数时，边距加起来为一整行，并保持节奏（这很好！）。但是，当有奇数时，基线将被丢弃，并且永远无法再次加入（除非我很幸运并且出现了另一个奇数列表）。

在列表项上设置整行边距太多（特别是对于长列表），并且不设置边距是不够的。

有什么办法可以避免/减轻这种情况吗？我不会提前知道行数，也不想为此使用javascript（我正在尝试构建一个可以重复使用的通用方案）。

4

2 回答 2

2

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

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

关键是这个选择器：

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

每当最后一个子元素也是奇数子元素时，这会将整行的边距添加到列表的最后一个子元素。整行边距取代了项目通常具有的半行，因此恢复了垂直节奏。基本上，它使任何列表总是占用整数行。

当一个列表有偶数个项目时，选择器什么也不做，一切都很好。

于 2011-09-07T05:15:47.740 回答
0

有趣的问题！

不是 100% 肯定，因为我没有在所有条件下进行测试，但这似乎有效。

  1. 保持line-height相同。
  2. 保持margins与line-height.
  3. 保持font-size不变。

示例：http: //jsfiddle.net/jasongennaro/PMCXt/1/

于 2011-09-06T13:53:50.453 回答