27

在包装器中使用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;
}
<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>

4

4 回答 4

20

老实说，我不知道为什么会发生这种情况，如果他们指定了这种行为，我正在查看文档，我想检查它是故意的还是错误的。现在我正在使用

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

它有效......所以添加上述属性#main_wrap > div，我认为如果你排除供应商前缀transform: translateX(0);就足够了。

演示

好的，我认为这是一个错误：

问题 84030：CSS 3 列错误（溢出：隐藏了不应该的功能）

绝对定位的元素被剪裁，好像有一个溢出：隐藏应用于盒子。但是，应用溢出：可见或任何其他规则并不能解决问题

我对此进行了更多思考，因为我建议了第一个解决方案，我随机插入了属性并且它起作用了，还有一种方法可以让您合法地通过使用clip属性来做您正在做的事情，而您将不再需要overflow: hidden;......

#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);
}

演示 2 （剪辑演示）

于 2015-04-14T10:09:12.010 回答
13

我花了很多时间调查这个问题，并找到了将 CSS 属性添加will-change: transform;到列布局内的项目的建议。例如：

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>
于 2018-07-13T05:44:07.010 回答
0

似乎使子组件width: 100%能够使columnCount: ${window.innerWidth/300}父-父的抽象来保持子的显示，我试图阻止iOS专注于<textarea/>我在其中的一个。另一个热门提示是让父母亲height: 100%和overflowX: auto对.... 编辑：尝试逆转让我给出了这个答案，并再次修复了这个错误，但这次使用columnGap:"1px"

于 2021-01-04T21:44:54.367 回答
-2

请找到我的ANSWER的工作示例，我已经在 Firefox 和 Chrome 中进行了测试。

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

我已经重新创建了示例中显示的布局，但您可能需要进行一些更改才能获得最终布局。因为它使用标记的（#***）属性

于 2015-11-04T03:13:19.390 回答