CSS多列避免中断

Question

我正在尝试使用 CSS 创建一个多列布局，其中有一些元素之间有标题。我尝试使用 break-after: avoid 来防止标题位于列的底部，但它似乎不起作用

这是显示我的问题的片段:

.columns-3 {
  column-count: 3;
}

.column-heading {
  font-weight: bold;
  break-after: avoid-column;
}

<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>

我还尝试使用 avoid-column 而不是 avoid 或避免在标题之后对元素进行中断

.column-heading + .column-item {
  break-before: avoid;
}

这是错误还是我误解了这些属性？
是否有另一种方法可以仅使用 css 来执行此操作，还是我必须在 JS/服务器代码中执行此操作？

Answer 1

试试这个:

    .columns-3 {
      column-count: 3;
    }

    .column-heading {
      font-weight: bold;
      break-after: avoid-column;
    }

<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-heading">
    Heading
  </div>
</div>
<div class="columns-3">
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>