html - 多列定义列表

标签 html css twitter-bootstrap

<分区>

我有一个 <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。

最佳答案

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

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

dl {
  columns: 2;
}

dd {
  break-before: avoid;
}

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

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

关于html - 多列定义列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16110794/

相关文章:

Javascript 菜单悬停事件不适用于 JQuery 加载的 html

javascript - 如何逐行显示div元素

javascript - 更新时向用户显示模式

javascript - 多级菜单

javascript - 幻灯片风格图片库

jquery - 为什么导航栏折叠不起作用?

html - 带有 flexbox 元素的水平滚动条

html - FireFox 中表格周围的 <div> 边框问题

html - Nav brand 和 nav pills 不在同一条线上

php - 在播放期间预加载音频并应用CSS