6

我有一个<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.ini 动态生成的。我有一个一定高度的容器。当它变得太大时,将这个列表分成两列的最佳方法是什么?如果可能,我想将其保留为 dl,尽管这不是绝对必要的。

如果它有帮助,我正在使用引导程序。

4

1 回答 1

16

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

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

dl {
  columns: 2;
}

dd {
  break-before: avoid;
}

对它的支持相当不错,但 Firefox 不支持该break-before属性(用于防止定义出现在与其术语不同的列中)。可能需要添加前缀。

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

于 2013-04-19T18:23:14.910 回答