如何使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不会在列格式化中破坏该元素。也许原因是它通常试图避免表格单元格中的列断裂，这是相当明智的。