当使用列数,溢出的内容完全消失,但第一列,为什么? [英] When using column-count, overflowing content completely disappears in all, but first column, why?
问题描述
在包装器中使用列计数时,如果包装器中的容器具有border-radius,并且容器中的内容正在溢出,则除第一个列之外的所有列中的内容将完全消失。
When using column-count in wrapper, and the containers in the wrapper have border-radius, and content in the container is overflowing, the content completely disappears in all the columns, except the first one.
以下是我的示例: https://jsfiddle.net/f4nd7tta/
红色半圆只显示在第一列,为什么?
CSS:
#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;
}
HTML:
<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>
推荐答案
我真的不知道为什么会这样,查看文档如果他们已经指定了这种行为,我想检查它的故意或它是一个错误。现在我使用
I honestly have no idea why this happens, I am looking the docs if they have specified this behavior, I want to check whether its intentional or it's a bug. For now I am using
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
并且它工作...所以添加上述属性在 #main_wrap ; div
,我想如果你排除供应商前缀 transform:translateX(0);
就够了。
And it works... So add the above properties in #main_wrap > div
and I think if you are ruling out the vendor prefixes than transform: translateX(0);
is sufficient.
好吧,我认为这是一个错误:
Ok, I think it's a bug :
问题84030 :CSS 3列错误(溢出:隐藏的功能不适用)
Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)
绝对定位的元素被剪切,好像有一个
overflow:hidden应用于框。但是,应用溢出:
visible或任何其他规则不能解决问题
The absolute positioned elements are clipped as if there is an overflow: hidden applied to the box. However, applying overflow: visible or any other rule does not fix the problem
我考虑更多的这一点,因为我建议第一个解决方案,我随机插入属性和它的工作,还有一种方法,你可以合法地做你正在做的使用 clip
属性,你不需要 overflow:hidden;
anymore ..
I thought more over this, as I suggested the first solution which I randomly inserted the properties and it worked, there is also a way where you can legally do what you are doing by using a clip
property and you won't need overflow: hidden;
anymore..
#main_wrap > div > div{
position:absolute;
background:red;
border-radius:40px;
width:40px;
height:40px;
right:-20px;
top:0;
clip: rect(0px,20px,40px,0px);
}
这篇关于当使用列数,溢出的内容完全消失,但第一列,为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!