时间戳

首页 > 解决方案 > 多个 CSS 列 DL 不中断

css - 多个 CSS 列 DL 不中断

问题描述

我目前正在使用描述列表来允许下面的标题和子术语。我使用 CSS columns 属性将其分成三列。

目前，这会导致列表在 dt 元素下方的 dd 元素列表中途中断。是否有 CSS 解决方案来阻止 dd 之间的中断，以便每列始终以 dt 开头？

我不喜欢使用 dt，使用 ul 或其他元素的解决方案就可以了。

<div id="pqr_list">
    <dl id="pqr_dl">
        <dt>TERM-A</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dt>TERM-B</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dt>TERM-C</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>
        <dd>Item 5</dd>
        <dd>Item 6</dd>
        <dd>Item 7</dd>
        <dt>TERM-D</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>        
    </dl>
</div>

我应该补充一下，我试过了

dd {
  break-before: avoid;
}

标签： css

解决方案

使用 div 包装 dl 的新允许方法的示例。在这里使用网格，但还有其他选择。而且无论如何，很多框架都使用自定义元素，我认为在“错误”的地方使用 div 时不会受到惩罚。

在MDN部分允许的内容中阅读有关它的更多信息。

dl>div {
  display: grid;
  border-top: 1px solid #ddd;
  padding-top: .25em;
  padding-bottom: .25em;
  grid-gap: 1em;
  grid-template-columns: minmax(100px, 20%) auto;
}

dl>div:last-child {
  border-bottom: 1px solid #ddd;
}

dt {}

dd {
  margin: 0;
  grid-column: 2;
}
<dl>
  <div>
    <dt>Parent company</dt>
    <dd>Air France-KLM Group</dd>
  </div>
  <div>
    <dt>Alliance</dt>
    <dd>Sky Team</dd>
  </div>
  <div>
    <dt>Hubs</dt>
    <dd>
      Amsterdam Airport Schiphol
    </dd>
  </div>
  <div>
    <dt>Similar</dt>
    <dd>Demo 1</dd>
    <dd>Demo 2</dd>
    <dd>Demo 3</dd>
  </div>
</dl>

刚刚意识到使用网格你甚至不需要一直使用 div。取决于您对 html 的控制程度。但是当您还不能在项目中使用网格时，它仍然很有用。

推荐阅读