Éviter une nouvelle colonne après un titre

Bonjour à tous,

J'ai une "liste" composée de

<div>

qui sont entrecoupés de titres

<h3>

. J'ai découpé cette liste en trois colonnes via le css (cf. plus bas). Le souci est que j'ai un titre en bas de la première colonne, ce qui n'est pas très beau.

Je cherche donc à interdire le passage à une nouvelle colonne après un titre.

J'ai essayé sans succès :

h3.reference-heading {                                                                                      
    -webkit-column-break-after: avoid; /* Chrome, Safari, Opera */                                            
    page-break-after: avoid; /* Firefox */                                                                    
    break-after: avoid; /* IE 10+ */                                                                          
    break-after: avoid-column; /* W3C */                                                                      
}            

Un aperçu de la liste :

<h3 class="reference-heading" id="A"><a href="#reference-skiplinks">A</a></h3>
  <div class="reference-record"><a href="/item/212">Abélard (A)</a></div>
  <div class="reference-record"><a href="/item/81">Action  (A)</a></div>
  <div class="reference-record"><a href="/item/227">Action Conjointe (A)</a></div>
  <div class="reference-record"><a href="/item/166">Altruisme (A)</a></div>
  <div class="reference-record"><a href="/item/111">Animal  (A)</a></div>
  <div class="reference-record"><a href="/item/64">Animal (GP)</a></div>
  <div class="reference-record"><a href="/item/167">Anxiété (A)</a></div>
  <div class="reference-record"><a href="/item/202">Arnauld (A)</a></div>
  <div class="reference-record"><a href="/item/223">Art (A)</a></div>
  <div class="reference-record"><a href="/item/163">Austin (A)</a></div>
  <div class="reference-record"><a href="/item/157">Autisme (GP)</a></div>
<h3 class="reference-heading" id="B"><a href="#reference-skiplinks">B</a></h3>
  <div class="reference-record"><a href="/item/225">Beauté (A)</a></div>
  <div class="reference-record"><a href="/item/168">Berkeley (GP)</a></div>
  <div class="reference-record"><a href="/item/165">Biais cognitifs (A)</a></div>
  <div class="reference-record"><a href="/item/54">Biais Cognitifs (GP)</a></div>
  <div class="reference-record"><a href="/item/18">Bien (GP)</a></div>
  <div class="reference-record"><a href="/item/4">Bioéthique (A)</a></div>
  <div class="reference-record"><a href="/item/19">Bioéthique (GP)</a></div>
  <div class="reference-record"><a href="/item/143">Bouddhisme (A)</a></div>
  <h3 class="reference-heading" id="C"><a href="#reference-skiplinks">C</a></h3>
<div class="reference-record"><a href="/item/142">Carnap (A)</a></div>
  <div class="reference-record"><a href="/item/169">Causalité (A)</a></div>
  <div class="reference-record"><a href="/item/31">Causalité mentale  (A)</a></div>
  <div class="reference-record"><a href="/item/20">Causalité mentale  (GP)</a></div>
  <div class="reference-record"><a href="/item/121">Certitude (GP)</a></div>
  <div class="reference-record"><a href="/item/82">Cerveau  (A)</a></div>
  <div class="reference-record"><a href="/item/203">Compassion (A)</a></div>
  <div class="reference-record"><a href="/item/102">Concertation  (A)</a></div>
  <div class="reference-record"><a href="/item/55">Connaissance  (GP)</a></div>
  <div class="reference-record"><a href="/item/207">Connaissance de soi (GP)</a></div>
  <div class="reference-record"><a href="/item/170">Connaissance formelle (A)</a></div>
  <div class="reference-record"><a href="/item/180">Connaissance formelle (GP)</a></div>
  <div class="reference-record"><a href="/item/74">Conscience (GP)</a></div>
  <div class="reference-record"><a href="/item/43">Consentement (GP)</a></div>
  <div class="reference-record"><a href="/item/80">Constructivisme Métaéthique  (GP)</a></div>
  <div class="reference-record"><a href="/item/29">Constructivisme métaéthique (A)</a></div>
  <div class="reference-record"><a href="/item/103">Corps  (A)</a></div>
  <div class="reference-record"><a href="/item/104">Corps  (GP)</a></div>
  <div class="reference-record"><a href="/item/90">Cosmologie  (GP)</a></div>
  <div class="reference-record"><a href="/item/61">Cournot  (A)</a></div>
  <div class="reference-record"><a href="/item/70">Création  (A)</a></div>
  <div class="reference-record"><a href="/item/12">Création (GP)</a></div>
  <div class="reference-record"><a href="/item/213">Croyance religieuse (A)</a></div>
<h3 class="reference-heading" id="D"><a href="#reference-skiplinks">D</a></h3>
  <div class="reference-record"><a href="/item/226">Danto (A)</a></div>
  <div class="reference-record"><a href="/item/112">Davidson  (A)</a></div>
  <div class="reference-record"><a href="/item/146">Davidson (GP)</a></div>
  <div class="reference-record"><a href="/item/101">Définition  (A)</a></div>
  <div class="reference-record"><a href="/item/56">Démonstration  (GP)</a></div>
  <div class="reference-record"><a href="/item/83">Dépiction  (A)</a></div>
  <div class="reference-record"><a href="/item/123">Descartes (GP)</a></div>
  <div class="reference-record"><a href="/item/113">Désir  (A)</a></div>
  <div class="reference-record"><a href="/item/89">Désir  (GP)</a></div>
  <div class="reference-record"><a href="/item/193">Développement moral (GP)</a></div>
  <div class="reference-record"><a href="/item/186">Dieu (A)</a></div>
  <div class="reference-record"><a href="/item/109">Dignité  (A)</a></div>
  <div class="reference-record"><a href="/item/125">Dignité (GP)</a></div>
  <div class="reference-record"><a href="/item/145">Douleur (GP)</a></div>
  <div class="reference-record"><a href="/item/91">Droit  (A)</a></div>
  <div class="reference-record"><a href="/item/49">Duperie de soi (A)</a></div>
[...]

La mise en colonne se fait avec :

#reference-headings {                                                                                         
    -webkit-columns: 3;                                                                                       
    -moz-columns: 3;                                                                                          
    column-count: 3;                                                                                                                                                                                  
}        

Bonjour,

Cette fonctionnalité marche très mal d'une part (nombreux bugs), et est plutôt pensée pour les impressions où la notion de "page" existe d'autre part. Il faut du bol pour arriver à ses fins.

Amicalement,
Modifié par parsimonhi (13 Jan 2021 - 19:24)