CSS float dt / dd left in pairs

Question

I have the following html code:

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

I try to make them swim in pairs (the same width), while all dtgo to the first line and everything ddto the second.

Like this:

term1 term2 term3
defn1 defn2 defn3

I tried all kinds of display combinations: block (+ floats / clears), inline-block, table- *, flex, but no one closed.

Any idea how this can be done?

Answer 1

- , CSS. dl nth-child. calc(), , , ( : 4).

CSS , CSS , :

CSS , ?

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);
}

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

Hide result

Answer 2

, flex, , .

html - div.

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;
}

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

Hide result

Answer 3

, , , . CSS3 break.

; FF.

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

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

Hide result

, , :

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>

Hide result

Using selectors divand ddalso will work here, but I use dl divand div ddto make sure that we do not spoil anyone dlwho does not have a column layout.

Note : although this will be fine (in all browsers, I believe), it is, strictly speaking, invalid HTML. If you can get away from using dl, I personally will do something like

<div class="terms">
    <div class="term">
        <p>term1</p>
        <dfn>def1</dfn>
    </div>
    <div class="term">
        <p>term2</p>
        <dfn>def2</dfn>
    </div>
</div>