CSS sautes de colonnes?

Question

J'ai essayé les colonnes CSS, mais je n'arrive pas à faire fonctionner les sauts de ligne. Voici le CSS que j'ai utilisé jusqu'à présent :

#container { 
    width: 500px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
} 
h1 {
    break-after: always;
    -moz-column-break-after: always;
    -webkit-column-break-after: always;
}

Et voici le code HTML pertinent :

    L'en-tête de la première colonne
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Maecenas interdum mattis leo, id vehicula sapien ultricies et.
    Donec orci nunc, rhoncus ut convallis a, pretium quis elit.
    Aenean vulputate vulputate bibendum.
    Fusce imperdiet velit quis diam fermentum ut volutpat ipsum convallis.

Peu importe si j'utilise break-after: avoid, break-after: always, break-before: avoid ou break-before: always, je obtiens toujours le même résultat. Rien ne change. Est-ce que quelqu'un peut m'aider ? J'ai testé cela sur Firefox 4.6 et Safari 5.0.5.

Merci

Answer 1

Les règles de saut de colonne CSS sont mal prises en charge, mais j'ai trouvé une solution de contournement qui fait quelque chose d'assez proche. Au lieu d'écrire ceci :

    Titre
    Paragraphe

Je suis en train d'écrire ceci :

       Titre
       Paragraphe

Ensuite, le CSS ressemble à ceci :

 div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }

Vous pouvez voir les résultats ici, par exemple.

Answer 2

J'ai rencontré le même type de problème et je l'ai résolu comme suit.

Mon principal problème était de ne pas insérer de saut de ligne après chaque bloc "titre/paragraphe" mais d'éviter un saut de colonne à l'intérieur d'un bloc "titre/paragraphe".

La solution est simple :

1. Enveloppez chaque bloc "titre/paragraphe" dans une balise span.

2. Dans le CSS, ajoutez une référence à la balise span, avec le code suivant :

   display: inline-block; width: 100%;

Le petit inconvénient est que cela peut laisser des espaces vides en bas de certaines colonnes.

Dans mon cas, tout le CSS est comme suit (div définit la mise en forme globale du flux de données) :

div {
    -webkit-column-width: 20em; /* 20em de large */
    -webkit-column-gap: 2em;  /* espacement de 2em */
    -webkit-column-rule: 1px solid #eee;   /* bordure de 1px entre les colonnes */
    -webkit-column-count: 3; /* 3 colonnes max! */

    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee; 
    -moz-column-count: 4;

    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee; 
    -ms-column-count: 3;

    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee; 
    column-count: 3;

    padding: 5px;
}

.tokeeptogether {
    display: inline-block;
    width: 100%;
}

Answer 3

Voici quel est le problème - pas de saut de colonne après "The header" dans Safari et Firefox :

Selon ce lien, ce lien et ce lien les sauts de colonnes ne fonctionnent pas encore.

Answer 4

Les sauts de colonne n'ont jamais été pris en charge dans les versions précédentes de Safari - je suppose que c'est toujours le cas. Il est plutôt étrange qu'Apple mentionne que cela est pris en charge depuis la version 3.0 cependant (Documentation de Safari sur les sauts de colonne) ...

Il en va de même avec Firefox. Chrome est le seul navigateur qui supporte presque tous, sinon tous, les contrôles de colonne.

Answer 5

break-after: 

est incorrect, devrait être:

column-break-after

personne n'a également mentionné ces propriétés:

-webkit-column-span: all;
-moz-column-span: all;
column-span: all;

qui semblent pourraient être utiles ici

éditer: aussi, il convient de mentionner que le support des colonnes est maintenant assez correct en fait, bien que avec l'utilisation des préfixes des fournisseurs.

column-fill

n'est toujours pas pris en charge par la plupart des navigateurs mais à ma connaissance la majorité des autres propriétés le sont