Zweispaltiges Layout mit neuen Zeilenumbrüchen

Question

Ich probiere für ein redaktionelles Projekt ein mehrspaltiges Layout im Zeitschriftenstil aus.

Da Monitore immer größer werden, wollte ich alle verfügbaren Zoll des Monitors ausnutzen, indem ich ein Layout erstellte, das einem Papiermagazin sehr ähnlich ist (zwei bis drei Spalten pro Seite).

Ich verwende den TipTap Editor für die Postverwaltung (da er sehr sauberen HTML-Code zurückgibt) und im Frontend erhalte ich die folgende HTML-Ausgabe:

Ich verwende die CSS-Spaltenklasse, um den Artikel in zwei Teile aufzuteilen:

article {
       columns: 2;
    }

Aber das Ergebnis ist dieses:

Ich möchte alle h2 in Lösungsabsätze unterteilen, damit ich die Kapitel horizontal erweitern kann, etwa so:

Ist es möglich, H2 mithilfe von Pseudoklassen abzufangen?

P粉068486220 · Answer

将每一章放在一个 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

Zweispaltiges Layout mit neuen Zeilenumbrüchen

Antworte allen(1)Ich werde antworten

Chapter 1

1.1 - The First

1.2 - The Second

1.3 - The Third

Chapter 2

2.1 - The First