Disposition en deux colonnes avec de nouveaux sauts de ligne

Question

J'essaie une mise en page de style magazine multi-colonnes pour un projet éditorial.

Étant donné que la taille des moniteurs ne cesse d'augmenter, j'ai voulu profiter de tous les pouces disponibles du moniteur en créant une mise en page très similaire à celle d'un magazine papier (deux à trois colonnes par page).

J'utilise TipTap Editor pour la gestion des publications (car il renvoie du code HTML très propre), et sur le frontend, j'obtiens la sortie html suivante :

J'utilise la classe CSS columns pour diviser l'article en deux parties :

article {
       columns: 2;
    }

Mais le résultat est le suivant :

Je souhaite diviser tous les h2 en paragraphes de solutions afin de pouvoir étendre les chapitres horizontalement, comme ceci :

Est-il possible d'intercepter H2 à l'aide de pseudo-classes ?

P粉068486220 · Answer

Il peut être utile de placer chaque chapitre dans un div et ils s'empileront les uns sur les autres comme le résultat souhaité.

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