相关疑难解决方法(0)

CSS3列 - 强制非破坏/分裂元素?

我正在使用一些CSS3列(column-count: 2;column-gap: 20px;)将一些内容拆分为两列.在我的内容中,我有一个<p>,然后是a <blockquote>,然后是另一个<p>.

我的问题:有没有办法阻止我<blockquote>(或任何其他指定的元素)分成两列?

例如,目前我<blockquote>的部分位于第1列,部分位于第2列.

Blockquote拆分为多个列

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

Blockquote保持在列中

知道这是否可以实现?

谢谢!

css css3

57
推荐指数
4
解决办法
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)

css css3 column-count css-multicolumn-layout

26
推荐指数
2
解决办法
9252
查看次数

标签 统计

css ×2

css3 ×2

column-count ×1

css-multicolumn-layout ×1