J’utilise des colonnes CSS3 (nombre de column-count: 2;column-gap: 20px;
) pour fractionner du contenu en deux colonnes. Dans mon contenu, j’ai un
suivi d’un
suivi d’un autre
.
- Alternative au tag HTML Bold
- Caret à l’envers
- aligner verticalement l’image en div
- Existe-t-il de bonnes raisons d’utiliser hexadécimal sur décimal pour les valeurs de couleur RVB en CSS?
- Utiliser plusieurs règles @ font-face en CSS
Ma question: Existe-t-il un moyen d’empêcher mon
(ou tout autre élément spécifié) de se diviser en deux colonnes?
Par exemple, mon
est actuellement partiellement dans la colonne 1 et partiellement dans la colonne 2.
Idéalement, j’aimerais que le
rest ensemble dans la colonne 1 ou 2.
Une idée si cela peut être réalisé?
Merci!
- Quelle est la meilleure façon d’effacer le style CSS «float»?
- pourquoi mon site d’administration Django n’a pas le style css
- CSS3 Flexbox: affichage: boîte vs flexbox vs flex
- Les fonts IE8 CSS @ font-face ne fonctionnent que pour: avant le contenu sur et parfois lors de l’actualisation / de l’actualisation
- Amener l’élément au premier plan à l’aide de CSS
Ajouter un
display:inline-block;
à l’élément que vous souhaitez empêcher de fractionner.En théorie, la propriété que vous recherchez est …
blockquote { column-break-inside : avoid; }
Cependant, la dernière fois que j’ai vérifié, il n’était pas correctement implémenté dans Webkit, aucune idée sur Firefox. J’ai eu plus de chance avec:
blockquote { display: inline-block; }
Comme le rendu le traite comme une image et ne le casse pas entre les colonnes.
Juste FYI général pour les autres qui se heurtent à ce forum et ont besoin d’une solution pour Firefox.
En ce moment, Firefox 22.0 ne supporte pas la propriété
column-break-inside
même avec le préfixe-moz-
.Mais la solution est assez simple: utilisez simplement
display:table;
. Vous pouvez aussi faire **display:inline-block;
Le problème avec ces solutions est que les éléments de la liste perdront leur élément de style de liste ou leur icône de puce.** Aussi, un problème que j’ai rencontré avec
display:inline-block;
est que si le texte dans deux éléments de liste consécutifs est très court, l’élément du bas sera enroulé et aligné avec celui au-dessus.
display:table;
est le moins pire des deux solutions.Plus d’infos ici: http://trentwalton.com/2012/02/13/css-column-breaks/
Selon MDN , la solution correcte est
blockquote { break-inside: avoid-column; }
Cependant, ce n’est pas encore implémenté dans tous les navigateurs, une solution pratique est donc:
blockquote { display: inline-block; }