没有有效的标记将一对dt和dd标记 Package 在一起。di元素被提议用于XHTML 2.0，但XHTML 2.0从未成功。
由于每个项目都有一对内部标记，所以它不像ul，其中每个li标记都可以充当每个列表项目内容的内部 Package 器（在本例中充当每个列的 Package 器）。
基本上，每列使用dl或ul，语义标记很好，但是如果没有di，单个dl就不能很好地用于这种布局。

编辑：

正如@biziclop所提到的，一旦CSS3 Multiple-column layout被标准化并得到支持，就有可能在正确的位置断开列（除了布局方面的有限选项）。最终，代码看起来像这样：

dl {column-width:100px; column-fill:auto;}
dt {break-before:always;}

让我们来试试css3的不太好支持的多列功能：
缺点：

• 需要固定高度
• 不会换行（除非您编写一些媒体查询）

http://jsfiddle.net/rCQbP/5/

dl {
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
            column-width: 100px;
    /* fixed height MUST be used */
    height: 200px;
}

dt ~ dt {
    /* simulate column-break-before: always; */
    margin-top: 1000px;
}

我使用一组无序列表解决了这个问题：请在这里查看：http://jsfiddle.net/radialglo/pXLB4/注意，宽度不需要设置，但为了演示的目的，我设置了一个足够大的宽度，这样它就可以被推到下一行。

<div>
    <ul>Authors
        <li>John</li>
        <li>Luke</li>
    </ul>
    <ul>
    <li>Editor</li>
    <li>Frank</li>
    </ul>
</div>​

这个造型：

div ul{
    float: left;
    list-style: none;
    width: 100px;
    margin-bottom: 1em;
}​

如果你坚持使用语义，我不确定是否有可行的解决方案，这是因为每个定义术语和它的定义并没有以一种易于样式化的方式进行真正的分组。

使用一些绝对定位和第n个类型的选择器是可能的（旧浏览器不能识别-讨厌！-但媒体查询也不能识别，所以应该降级OK）：示范：http://jsfiddle.net/PrJWJ/6/

dt,dd{margin:0;}

@media (min-width:20em) /* 10em per column */
{
    /* Enable positioning*/
    dl{position:relative;}
    dt,dd{position:absolute;}

    dt{top:0;} /* All terms at the top */
    dd{top:1.3em;}  /* 1st dd under a term at 1.3em (factoring in line spacing) */
    dd+dd{top:2.6em;} /* 2nd dd under a term */

    /* 1st column */
    dt:nth-of-type(1),
    dt:nth-of-type(1)~dd
    {left:0;}

    /* 2nd column */
    dt:nth-of-type(2),
    dt:nth-of-type(2)~dd
    {left:10em;}
}

@media (max-width:19.99em)
{
    /* Space before a new term */
    dd+dt{margin-top:1em;}
}

但是，您需要根据行和列的最大可能数量来扩展它。

规范允许将dl中的每个组 Package 在div元素中：
为了使用微数据属性或其他适用于整个组的全局属性来注解组，或者只是为了样式化目的，dl元素中的每个组可以 Package 在div元素中。这不会改变dl元素的语义。

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
  使用此div应用必要的样式（例如flex）。