帶有新換行符的兩列佈局

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