CSS3 Columns - Forcer un élément non coupant / séparant?

Question

Je suis l'aide de certains CSS3 colonnes (column-count: 2;column-gap: 20px;) pour séparer un peu de contenu en deux colonnes. Dans mon contenu, j'ai un <p>, suivie par un <blockquote>, suivi par un autre <p>.

Ma question: Est-il un moyen de m'empêcher <blockquote> (ou tout autre élément spécifié) de diviser en deux colonnes?

Par exemple, actuellement mon <blockquote> est partiellement dans la colonne 1, et partiellement dans la colonne 2.

Idéalement, j'aimerais faire en sorte de l' <blockquote> des séjours dans la colonne 1 ou 2.

Aucune idée si cela peut être réalisé?

Merci!

Answer 1

Ajoutez display:inline-block; à l'élément que vous souhaitez empêcher de se scinder.

Answer 2

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é, cela n'avait pas été correctement implémenté dans Webkit, aucune idée de Firefox. J'ai eu plus de chance avec:

 blockquote {
  display: inline-block;
}
 

Comme le rendu le traite comme une image et ne le divise pas en colonnes.

Answer 3

En général pour info pour les autres qui bosse dans ce forum et ont besoin d'une solution pour Firefox.

Au moment d'écrire ceci, Firefox 22.0 ne prend pas en charge column-break-inside de la propriété, même avec -moz- préfixe.

Mais la solution est très simple: il suffit d'utiliser display:table;. Vous pouvez également faire **display:inline-block; Le problème avec ces solutions est que les éléments de la liste de perdre leur liste de style de l'élément ou de la puce.

**Aussi, un problème que j'ai vécu avec display:inline-block; , c'est que si le texte deux fois de suite les éléments de la liste est très courte, la partie inférieure de l'élément de réglera d'elle-même et en ligne avec l'un au-dessus d'elle.

display:table; est le moins pire des deux solutions.

Plus d'infos ici: http://trentwalton.com/2012/02/13/css-column-breaks/