如何使用flexbox将dt和dd并排放在另一个下面的多个dd？

Question

我正在尝试创建一个由键值对组成的列表,其中键位于左侧,值位于右侧,另一个位于另一侧.

Authors          John Doe
                 Jane Doe
                 Max Mustermann

Publishers       Johne Doe
                 Jane Doe
                 Max Mustermann

我的问题是如何强制每个dd元素之间的换行？我知道浮动元素会很容易,但我想知道是否有可能只使用flexbox.不幸的是,根据定义,我无法将dd元素包装在自己的容器中.

dl {
  display: flex;
}

dt {
  width: 33%;
}

dd {
  margin: 0;
}

<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

Answer 1

如何设置flex-wrap的dl,其宽度为> 50% dd ,沿margin-left: auto？

见下面的演示:

dl {
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 33%;
}
dd {
  margin-left: auto;
  width: 66%;
}

<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

Answer 2

自发布以来已经有几年了，但今天肯定有更好的方法来处理这个问题display: grid：

dl {
  display: grid;
  grid-template-columns: 33% auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
}

<dl>
  <dt>Authors</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>

  <dt>Publishers</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>
</dl>

Answer 3

注意：这个问题没有很好的 HTML 片段代码（下面更好）。
... 我们必须从良好的 HTML 结构开始（而不是让 HTML 适应最简单的 CSS）。理想的 HTML 结构也说明了一些关于内容的语义。

一个dl列表的所有物品！

<dl>/( <dt>+ <dd>) 列表的典型应用类似于<ul>/<li>列表，但使用键值对而不是项目符号。

Only one description list:
<dl>
  <dt>Authors</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>

  <dt>Etc</dt>
    <dd>etc...</dd>

  <dt>Publishers</dt>
    <dd>John Willey</dd>
    <dd>Miramax</dd>
    <dd>Mary Max</dd>
</dl>

Other list, now starting with one descriptor-item:
<dl>
  <dt>Test</dt> <dd>One desscriptor here</dd>
  <dt>Etc</dt> <dd>etc...</dd>
</dl>

在这种情况下，@kukkuz 评论的解决方案是有效的，对我们只有一个ddper的情况进行了一些调整dt，就像其他 JsFiddle 一样。

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
dt {
  font-weight: bold;  
  width: 25%;
  padding-top: 1em;  
}
dd {
  display: flex;
  margin: 0;
  padding-top: 1em;
}

dd + dd {
  width: 100%; 
  padding-top: 0;  
}
dt + dd:not(:nth-child(2)),
dt:first-child + dd:nth-child(2) {
  width: 75%;
}
dd + dd::before {
  width: 25%;
  content: "";
  padding-top: 0
}

对于真正典型和通用（flex）的应用程序，我们需要避免小屏幕（智能手机）的问题，所以把所有的都放在一个@media块中，

@media screen and (min-width: 360px) {
   ... all above CSS here ...
}

@media screen and (max-width: 360px) {
  dt {
    font-weight: bold;  
    width: 33%;
    padding-top: 1em;  
  }
}

参见jsfiddle.net/m5qh8g7r。