html - 如何在不使用 div 的情况下包围 dt dd 标签？

Question

如何在不使用 div 作为 dl 的直接子代的情况下获得以下代码的相同结果？

dl{
    padding: 0;margin: 0;
    text-align: center;
}

dl div{
    display: inline;
    display: inline-block;
  margin-right:2%;
    width: 40%;
    vertical-align: top;
}

dl dt{
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
}

dd{
  margin:0;
    text-align: justify;
    font-size: 1.2em;
}

<dl>
  <div>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
    </dd>
  </div>
  
  <div>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
    </dd>
  </div>
</dl>

注意:我在这里仅使用两个 dt 及其被 div 包围的 dd 作为示例，实际上我需要两个以上 ...

2020-01-04 编辑

今天在 dl 中使用 div 是有效的做法 "Divs are valid elements inside of a Description List" .

Answer 1

您可以使用 CSS 列:

dl { -webkit-columns: 2; -moz-columns: 2; columns: 2; }

避免在元素 dt 和 dd 内换行:

dt, dd { 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;  
}

避免在 dt 之后换行:

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

示例 fiddle :https://jsfiddle.net/abhitalks/9o797s77/

示例片段:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
dl {
  font-size: 1.2em;
  margin: 8px;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}
dt {
  text-transform: uppercase;
  text-align: center;
  -webkit-column-break-after: avoid;
  column-break-after: avoid;
  page-break-after: avoid;
  break-after: avoid-column;
}
dd {
  text-align: justify;
}
dt,
dd {
  margin: 8px;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

<dl>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
</dl>

编辑:添加了 FireFox 特定的供应商前缀。已使用 IE11、Edge、Chrome 47 和 Firefox 41 进行检查。