如何使 dd 在列布局中与其 dt 保持一致？

Question

我有一个带有column-width: 20em; 的布局，其中包含一个定义列表。有时dt 会被困在一列的底部，而dd 位于下一列的顶部。

有一个live example here。 （虽然没有完全简化为一个最小的例子。）

查看第一列和第三列的底部。

我知道我可以控制带有寡妇、孤儿和内分栏的元素内部的中断，但是有没有办法让这两个元素表现得像一个？

This question 是关于一个类似的问题，但感觉并不是每个 dt dd 对在语义上都是一个部分。

Answer 1

尽管在现代浏览器中相对广泛地支持多列布局，但column breaks 的控制实现得很差。实现大多只支持防止元素内的分栏符，而不是在元素之后或之前。因此，虽然理论上您可以使用break-before 或break-after 属性，但实际上您需要使用break-inside。 （根据MDN，IE 10+ 支持break-after: avoid-column，但设置在dt 上似乎对IE 11 没有任何影响。）

除了dt 和dd 之外，您不能在dl 中使用任何东西。这不仅仅是一个正式的规则；浏览器实际上强制执行它，忽略任何尝试在dt 和dd 周围使用包装器。这确实是 dl 元素中的设计缺陷。

因此，您可以做的是使用其他标记代替dl，例如

<div class=dl>
  <div class=pair>
    <div class=dt>...</div>
    <div class=dt>...</div>
  </div>
  <div class=pair>
    <div class=dt>...</div>
    <div class=dt>...</div>
  </div>
  ...
</div>

然后你可以这样设置样式：

.dl {
  -webkit-column-width: 20em;
  -moz-column-width: 20em;
  column-width: 20em;
}
.dd { 
  margin-left: 1em;
}
.pair {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}

这可以防止在现代版本的 IE 和 Chrome 中出现不需要的分栏符。恐怕没有办法让它在 Firefox 上运行。

更新：似乎如果您将<div class=pair> 元素包装在一个单单元格表<table><tr><td><div class=pair>...</div></table> 中，那么Firefox 不会在列格式中破坏该元素。可能原因是它通常会尽量避免在表格单元格内出现分栏，这是相当明智的。