如何对齐dt和dd并排使用flexbox与多个dd在另一个下？ [英] How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

问题描述

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

 作者John Doe 
 Jane Doe 
 Max Mustermann 
 
 Publishers Johne Doe 
 Jane Doe 
 Max Mustermann $我的问题是如何强制每个 dd  c $ c>元素？我知道这将是容易与浮动元素，但我想知道是否可能实现使用flexbox只。不幸的是，根据定义，我不能在自己的容器中包装 dd 元素。
 
 
 
 
 
 
  dl {display：flex;} dt {width：33％;} dd {margin：0;}  
 
 < dl> < dt>作者< / dt> < dd> John Doe< / dd> < dd> Jane Doe< / dd> < dd> Max Mustermann< / dd>< / dl>< dl> < dt>发布商< / dt> < dd> John Doe< / dd> < dd> Jane Doe< / dd> < dd> Max Mustermann< / dd>< / dl>  
 
 
 
解决方案
如何在 dl 上设置 flex-wrap   dd  
和 margin-left：auto 的宽度> 50％？
 
 
 
查看以下示范：
 
 
 
 
 
 
  dl {显示：flex; flex-wrap：wrap;} dt {width：33％;} dd {margin-left：auto; width：66％;}  
 
 < dl& < dt>作者< / dt> < dd> John Doe< / dd> < dd> Jane Doe< / dd> < dd> Max Mustermann< / dd>< / dl>< dl> < dt>发布商< / dt> < dd> John Doe< / dd> < dd> Jane Doe< / dd> < dd> Max Mustermann< / dd>< / dl>  
 
 
 
 
I am trying to create a list consisting of key-value-pairs where the key is on the left and the values are on the right side one underneath the other.
Authors          John Doe
                 Jane Doe
                 Max Mustermann

Publishers       Johne Doe
                 Jane Doe
                 Max Mustermann
My problem is how do I force a line break between each dd element? I know this would be easy with floating elements, but I was wondering if it's possible to achieve using flexbox only. Unfortunately, by definition, I cannot wrap the dd elements in their own container.



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>



解决方案
How about setting flex-wrap on the dl and have a width > 50% for dd 
along with margin-left: auto?

See demo below:



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>





                        
这篇关于如何对齐dt和dd并排使用flexbox与多个dd在另一个下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！