jquery - 当 存在或不存在时将定义列表拆分为多列

Question

我正在寻找一种解决方案，可以让我像这样拆分列表:

<dl>
    <dt>Title of Column 1</dt>
    <dd>data for col 1</dd>
    <dd>data for col 1</dd>
    <dt>Title of Column 2</dt>
    <dd>data for col 2</dd>
    <dt>Title of Column 3</dt>
    <dt>Title of Column 4</dt>
</dl>

分成多列。有时会有dd元素，有时没有。我在想我可能会使用第 n 个 child ，但我必须知道会有多少元素，但我不会。有没有其他方法可以在不将其分解为多个定义列表的情况下完成此操作？

谢谢。

Answer 1

如果浏览器支持允许，您可以使用 CSS 列和应用于 dt 标记的 break-before 样式。

给定您的 HTML，以下 CSS 将为您提供所需的结果:

dl {
  column-count: 4;
  background: #ddd;
  height: 300px;
}

dt {
  -webkit-column-break-before: always;
  break-before: column;
}

注意:您需要确保列的高度至少与每列的标题和数据一样高。

浏览器支持:https://developer.mozilla.org/en-US/docs/Web/CSS/break-before(IE 10+，支持 Opera。带有浏览器前缀的 Chrome 和 Safari。不支持 Firefox)。