多列定义列表

Question

我<dl>喜欢这样:

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

这个列表是通过php动态生成的.我有一个高度的容器.当它变得太大时,将该列表分成两列的最佳方法是什么？如果可能的话,我想保留它作为dl,虽然它不是绝对必要的.

如果它有帮助,我正在使用bootstrap.

Answer 1

最优雅的方法是使用CSS列属性:

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

dl {
  columns: 2;
}

dd {
  break-before: avoid;
}

支持它是相当不错的,但Firefox不尊重该break-before属性(用于防止定义在与术语不同的列中结束).可能需要添加前缀.

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