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
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 ( , ). .
+13