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

发布时间：2020-12-14 18:43:05 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个由键值对组成的列表,其中键位于左侧,值位于右侧,另一个位于另一侧. Authors John Doe Jane Doe Max MustermannPublishers Johne Doe Jane Doe Max Mustermann 我的问题是如何在每个dd元素之间强制换行？我知道浮动元素会很容易,但我想知道

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

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>

解决方法

如何在dl上设置flex-wrap并且宽度> gt; 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!