Quantity:
Size:
Rise...">

Multiple Column Definition List

I have <dl>this:

<dl>
<dt id="a_1">Quantity:
<dd id="a_2">
<dt id="b_1">Size:
<dd id="b_2">
<dt id="c_1">Rise:
<dd id="c_2">
<dt id="d_1">Color:
<dd id="d_2">
....
</dl>

This list is generated dynamically through php. I have a container with a certain height. What is the best way to make this list in two columns when it gets too big? If possible, I would like to save it as a dl, although it is not absolutely necessary.

If that helps at all, I use bootstrap.

+5
source share
1 answer

The most elegant way is to use CSS column properties:

http://codepen.io/cimmanon/pen/tcyHv

dl {
  columns: 2;
}

dd {
  break-before: avoid;
}

, Firefox break-before ( , ). .

http://caniuse.com/#feat=multicolumn

+13

All Articles