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

Question

我有一個column-width: 20em;的布局column-width: 20em; 包含定義列表。 有時dt會滯留在列的底部，而dd在下一列的頂部。

這里有一個生動的例子 。 （盡管不是完全干凈地簡化為一個最小的示例。）

請參閱第一和第三列的底部。

我知道我可以用寡婦，孤兒和列中斷來控制元素內的中斷，但是有沒有辦法使這兩個元素表現為一個？

這個問題與一個類似的問題有關，但是從語義上看，每個dt dd對都不是一個部分。

Answer 1

盡管這樣的多列布局在現代瀏覽器中得到了相對廣泛的支持，但是對分行符的控制卻很難實現。 實現大部分只支持防止元素內部的列中斷，而不是元素之后或之前。 因此，盡管理論上可以使用break-before break-after或break-before break-after屬性，但實際上需要使用break-inside入。 （根據MDN ，IE 10+支持break-after: avoid-column ，但是將其設置為dt似乎對IE 11沒有任何影響。）

您不能在dl使用dt和dd以外的任何東西。 這不僅僅是一個正式的規則； 瀏覽器實際上執行了它，而忽略了在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不會在列格式中破壞該元素。 也許原因是它通常試圖避免在表格單元格內出現列中斷，這是非常明智的。