问题描述
背景
出于打印目的，我需要制作一个仅 的多列布局。所以现在我正在使用Chromium 85，但是我可以切换到其他任何方式，因为我只需要为单个浏览器提供支持。如果可以帮助解决问题，我也可以自由使用几乎所有CSS / JS库。
问题描述
我正在尝试实现一个非常基本的多列布局。一切工作正常，除了我无法避免丧偶的标题。 break-after: avoid指令由于某些原因无法正常工作。
问题图示
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</p>
</div>
</body>
</html>
问题
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）