如何使用可变长度的均衡定义术语创建定义列表？

Question

我正在尝试创建一个定义列表(在本指南的帮助下),其元素dt和dd元素具有不同的内容.当然,我可以对这些元素的宽度进行硬编码,但我希望列表采用最长的dt元素并使其兄弟姐妹拥有其长度.此外,当dd元素的内容长于可用空间时,新行不能从dt元素下面开始,而是dd在该问题的第二个屏幕截图中元素开始的位置.

我以为我可以用display: flex属性来解决这个问题,但坚持使用一个不起作用的解决方案.这是不可能的还是错误的？

这是我到目前为止(小提琴):

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