CSS3列 - 强制非打破/分裂元素？

问题描述

我使用一些CSS3列（ column-count：2; column-gap：20px; ）将一些内容拆分成两列。在我的内容中，我有一个< p> ，其次是< blockquote> 我的问题：有没有办法阻止我的< blockquote>

; （或任何其他指定的元素）拆分为两列？

例如，目前我的< blockquote> ; 部分在第1列，部分在第2列。

理想情况下，我想让< blockquote> ; 保持在第1栏或第2栏中。

任何想法是否可以实现？

谢谢！

解决方案

添加 display：inline-block; 你想防止分裂。

I'm using some CSS3 columns (column-count: 2;column-gap: 20px;) to split some content into two columns. In my content I have a <p>, followed by a <blockquote>, followed by another <p>.

My question: Is there a way of preventing my <blockquote> (or any other specified element) from splitting into two columns?

For example, currently my <blockquote> is partially in column 1, and partially in column 2.

Ideally I'd like to make it so the <blockquote> stays together in either column 1 or 2.

Any idea if this can be achieved?

Thanks!

解决方案

Add display:inline-block; to the item you want to prevent from splitting.

这篇关于CSS3列 - 强制非打破/分裂元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！