CSS：将DT和DD保持在列中

Question

我有一个分为多列的定义列表：

dl { -webkit-column-count: 2; }

不幸的是，我有时会遇到一个DT出现在一列的最底部而后面的DD出现在下一个顶部的情况，这看起来很难看。由于我无法将要保留在容器中的元素包装在一个容器中，因此我唯一的选择似乎是：

dt { -webkit-column-break-after: avoid; }

但这似乎不起作用。有什么想法吗？

Here's a fiddle证明了这个问题。