如何使用 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

自发布以来已经有几年了，但今天使用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 2

注意：问题有不是HTML的好sn-p代码（下面更好）。
...我们必须从良好的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 评论的解决方案是有效的，对于每个dt 只有一个dd 的情况进行了一些调整，如this other 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。

Answer 3

如何在dl 上设置flex-wrap 并为dd 设置宽度> 50% 还有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>