如何使用flexbox在另一个下方有多个dd并排对齐dt和dd？

一尘不染

如何使用flexbox在另一个下方有多个dd并排对齐dt和dd？

css

我正在尝试创建一个由键-值对组成的列表，其中键在左侧，值在右侧，另一个在下方。

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>

阅读 475

2020-05-16

共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>

2020-05-16