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>