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/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>