CSS浮动dt / dd成对出现

Question

我有以下HTML代码：

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
</dl>

我试图让它们成对浮动（相同宽度），第一行上的所有dt和第二行上的dd都是。

像这样：

term1 term2 term3
defn1 defn2 defn3

我尝试过各种各样的显示组合：block（+ float / clears），inline-block，table- *，flex，但没有一个接近。

知道如何做到这一点？

Answer 1

这里有一个使用弹性框而没有更改列表，只有CSS。基本上只是使用dl伪选择器定义nth-child子项的顺序。遗憾的是，此处使用的calc()方法取决于您知道列表中的子项数（在我的示例中：4）。

只使用CSS，您无法确定孩子的数量，但如果您知道列表中的最大项目数，您可以计算兄弟姐妹并为不同的情况准备CSS：

http://lokeshdhakar.com/projects/lightbox2/#examples

＆＃13;

＆＃13;

dl {
  display: flex;
  flex-flow: row wrap;
}

dt,dd {
  margin: 0;
  flex-grow: 1;
  }

dt {
  order: 0;
  flex-basis: calc(100%/4);
}

dd {
  order: 1;
  flex-basis: calc(100%/4);
}

＆＃13;

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
  <dt>term4</dt><dd>defn4</dd>
</dl>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我用flex实现了你想要的东西，但只是添加了控制整体宽度的包装器。

只有更改为html标记的是div包装器。

＆＃13;

＆＃13;

div {
  width: 50%;
}
dl {

	-ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
	
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

dt {
min-width: 30%;

  -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
  -moz-flex: 0 0 30%;  
               /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 30%;          /* Chrome */
  -ms-flex: 0 0 30%;              /* IE 10 */
  flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;

}

dd {
min-width: 30%;

  -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
    -moz-flex: 0 0 30%;
                 /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 30%;          /* Chrome */
  -ms-flex: 0 0 30%;              /* IE 10 */
  flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
   
  -webkit-box-ordinal-group: 2;  
  -moz-box-ordinal-group: 2;     
  -ms-flex-order: 2;     
  -webkit-order: 2;  
  order: 2;
   
  margin-left: 0;
}

＆＃13;

<div>
  <dl>
    <dt>term1</dt>
    <dd>defn1</dd>
    <dt>term2</dt>
    <dd>defn2</dd>
    <dt>term3</dt>
    <dd>defn3</dd>
  </dl>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有一个适当且可扩展的解决方案，遗憾的是，它在大多数浏览器中都不起作用。它需要CSS3 break properties的适当支持。

我仍然以此作为回答;目前在FF工作。

＆＃13;

＆＃13;

dl {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
dd + dt {
  page-break-before: always;
}
dd {
  margin: 0;
}

＆＃13;

<dl>
  <dt>Term 1</dt>
  <dd>Defn 1</dd>
  <dt>Term 2</dt>
  <dd>Defn 2</dd>
  <dt>Term 3</dt>
  <dd>Defn 3</dd>
</dl>

<dl>
  <dt>Term 1</dt>
  <dd>Defn 1</dd>
  <dt>Term 2</dt>
  <dd>Defn 2</dd>
  <dt>Term 3</dt>
  <dd>Defn 3</dd>
  <dt>Term 4</dt>
  <dd>Defn 4</dd>
</dl>

<dl>
  <dt>Term 1</dt>
  <dd>Defn 1-1</dd>
  <dd>Defn 1-2</dd>
  <dd>Defn 1-3</dd>
  <dt>Term 2</dt>
  <dd>Defn 2</dd>
  <dt>Term 3-1</dt>
  <dt>Term 3-2</dt>
  <dt>Term 3-3</dt>
  <dd>Defn 3</dd>
  <dt>Term 4</dt>
  <dd>Defn 4</dd>
  <dt>Term 5</dt>
  <dd>Defn 5</dd>
</dl>

＆＃13;

＆＃13;

＆＃13;

假设浏览器做了正确的事情，结果将如下所示：

Answer 4

将来，您可以使用建议的css属性break-after在每dd之后开始一个新列。任何浏览器都不支持，所以你必须做这样的事情

dl div {
  display: inline-block
}
div dd {
  margin: 0
}

<dl>
  <div>
    <dt>term1</dt>
    <dd>defn1</dd>
  </div>
  <div>
    <dt>term2</dt>
    <dd>defn2</dd>
  </div>
  <div>
    <dt>term3</dt>
    <dd>defn3</dd>
  </div>
</dl>

使用选择器div和dd也可以在这里工作，但我正在使用dl div和div dd来确保我们不会弄乱dl dl 1}}没有列布局。

注意：虽然这会很好（在我认为所有浏览器中），但严格来说它是无效的HTML。如果您可以远离使用<div class="terms"> <div class="term"> <p>term1</p> <dfn>def1</dfn> </div> <div class="term"> <p>term2</p> <dfn>def2</dfn> </div> </div> ，我个人会做类似

的事情

id="recaptcha"