我正在使用一些CSS3列(column-count: 2;column-gap: 20px;)将一些内容拆分为两列.在我的内容中,我有一个<p>,然后是a <blockquote>,然后是另一个<p>.
我的问题:有没有办法阻止我<blockquote>(或任何其他指定的元素)分成两列?
例如,目前我<blockquote>的部分位于第1列,部分位于第2列.

理想情况下,我想让它<blockquote>在第1列或第2列中保持在一起.

知道这是否可以实现?
谢谢!
当column-count在包装器中使用,并且包装器中的容器已经border-radius应用,并且容器中的内容溢出时,除了第一个列之外,内容完全消失在所有列中.
这是我的例子:https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见,为什么?
#main_wrap{
width:100%;
border:solid 1px black;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
#main_wrap > div{
border-radius:5px;
overflow:hidden;
position:relative;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
width:70%;
height:300px;
border:solid 2px grey;
margin:2px;
}
#main_wrap > div > div{
position:absolute;
background:red;
border-radius:40px;
width:40px;
height:40px;
right:-20px;
top:0;
}Run Code Online (Sandbox Code Playgroud)
<div id="main_wrap">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>Run Code Online (Sandbox Code Playgroud)