28111 sujets

CSS et mise en forme, CSS3

É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;                                                                                                                                                                                  
}
Modérateur
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)
Merci pour la réponse. J'avais lu cela effectivement.

Y a-t-il d'autres solutions (sachant que je ne peux pas véritablement agir sur l'html qui est généré automatiquement par un cms) ?
Modérateur
Bonjour,

Pas de solution propre selon moi.

Amicalement,
Modifié par parsimonhi (13 Jan 2021 - 21:33)
Sujet clos
Aller à