多列定义列表 [英] Multi-column definition list
问题描述
我有一个< 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.
This list is generated dynamically through php. I have a container of a certain height. What is the best way to make this list into two columns when it gets too large? If possible, I would like to keep it as a dl though it's not absolutely necessary.
如果有帮助,我正在使用引导程序.
If it helps at all, I'm using bootstrap.
推荐答案
最优雅的方法是使用CSS列属性:
The most elegant way would be to use the CSS columns properties:
http://codepen.io/cimmanon/pen/tcyHv
dl {
columns: 2;
}
dd {
break-before: avoid;
}
对此的支持相当不错,但是Firefox不支持 break-before
属性(该属性用于防止该定义终止于与其术语不同的列中).可能需要添加前缀.
Support for it is fairly good, but Firefox doesn't honor the break-before
property (which is being used to prevent the definition from ending up in a different column from its term). Adding prefixes may be necessary.
http://caniuse.com/#feat=multicolumn
这篇关于多列定义列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!