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;
}

这是一个bug，还是我误解了这些属性？

有没有其他方法可以只用css来做这件事，或者我必须用JS/Server代码做这件事？

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>

​