html - 如何创建具有可变长度的均衡定义项的定义列表？

Question

我正在尝试创建一个定义列表(在 this guide 的帮助下)，其 dt 和 dd 元素具有不同的内容。当然我可以对这些元素的宽度进行硬编码，但我希望列表采用最长的 dt 元素并使其 sibling 具有其长度。此外，当 dd 元素的内容长于可用空间时，新行不得从 dt 元素下方开始，而是从 dd 元素开始> 元素开始于 this question 中的第二个屏幕截图.

我以为我可以用 display: flex 属性来解决这个问题，但我坚持使用一个无效的解决方案。是不可能还是走错路了？

这是我到目前为止得到的 (fiddle) :

HTML:

<dl>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: Lorem imperdiet</dd>
   <dt>dt: Lorem id libero in Ipsum and so on and so on</dt>
   <dd>dd: Lorem id libero in ipsum dolor</dd>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd>
   <dt>dt: Lorem id libero in Ipsum</dt>
   <dd>dd: Lorem in ipsum dolor</dd>
</dl>

CSS:

dl {
   display: flex;
   flex-flow: column nowrap;
}
dt {
   background: gold;
   display: flex;
   flex-flow: row wrap;
}
dd {
   background: yellowgreen;
   display: flex;
   flex-flow: row wrap;
   width: auto;
   margin: 0;
   padding: 0;
}

Answer 1

我认为不可能存档您正在尝试的内容。 Flexbox 在这种情况下无济于事。您也不能使用显示表等，因为不幸的是 dl 语法缺少 dt+dd 组的包装。您将不得不使用 JS 来计算 dt 元素的宽度，但由于多行变体，它也不会那么容易。

但是这种稍微修改过的“传统”方法怎么样:使它们成为最小宽度但允许 dt 溢出到 dd。

dl:after {
  content: '';
  display: block;
  clear: both;
}
dt {
  float: left;
  clear: left;
  padding-top: 1em;
  margin-right: 1em;
}
dd {
  padding-top: 1em;
  margin-left: 15em;
}

http://codepen.io/ThiemelJiri/pen/KrZrxG