带有新换行符的两列布局

Question

我正在为编辑项目尝试多栏杂志风格布局。

由于显示器尺寸不断增大，我想通过创建与纸质杂志非常相似的布局（每页两到三栏）来利用显示器的所有可用英寸。

我正在使用 TipTap 编辑器进行文章管理（因为它返回非常干净的 HTML 代码），并且在前端我得到以下 html 输出：

我使用 css columns 类将文章分成两部分：

article {
       columns: 2;
    }

但是结果是这样的：

我想将所有的h2划分为解决段落，这样我就可以将章节水平展开，例如这样：

使用伪类是否可以拦截H2？

Answer 1

将每一章放在一个 div 中可能会有所帮助，它们会像您想要的结果一样堆叠在一起。

HTML

  

    
Chapter 1
    
 1.1 - The First
    
...
    
...
    
 1.2 - The Second
    
...
    
 1.3 - The Third
    
...
  
  

    
Chapter 2
    
 2.1 - The First
    
...
  

CSS

.block {
  column-count:2;
  column-gap: 30px;
  margin: 20px 0 50px 0;
}

h2 {
  margin-top: 0;
}

Codepen：https://codepen.io/halfandhalfhd/pen/PoamByX