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 によって動的に生成されます。私は特定の高さのコンテナを持っています。このリストが大きくなりすぎたときに、このリストを 2 列にする最善の方法は何ですか? 絶対に必要というわけではありませんが、できれば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 に答える