CSS 列隐藏 ::before 元素，其绝对位置扩展了他自己的列答案

【问题标题】：CSS columns hide ::before element with absolute position extending his own columnCSS 列隐藏 ::before 元素，其绝对位置扩展了他自己的列
【发布时间】：2023-03-17 19:19:02
【问题描述】：

在我的网站上，我有由伪元素的边界组成的三角形：before。我的问题是，如果我将这些三角形添加到列中的元素（column-count），则不是第一列中的三角形隐藏在前一列下。列有column-gap 集。我试过z-index: 不行。

小提琴：http://jsfiddle.net/aq9Laaew/208715/

    .masonry{
      column-count: 3;
      column-gap: 1.5em;
    }
    
    .child {
      height: 400px;
      background: #EEE;
    }
    
    span{
      left: -20px;
      position: absolute;
      z-index: 2;
    }
    
    span:before{
      content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 1.5em .5em;
        border-color: transparent transparent #D36135 transparent;
        z-index: 2;
    }

<div class="container">
<div class="masonry p-1">
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
</div>
</div>

【问题讨论】：

从你的小提琴中取出代码并在此处将其转换为 sn-p。
.masonry{ column-count: 3; column-gap: 0; } .child { height: 400px; background: #EEE; margin-left:1.5em; }
@Jasonbamber 可以，但第一列也会有剩余边距。当然我可以用 Javascript 删除它（获取孩子的坐标，检测是否在第一列中而不是删除），但这不是一个花哨的解决方案
.container{ overflow:hidden; } .masonry{ column-count: 3; column-gap: 0; margin-left:-0.75rem; } .child { height: 400px; background: #EEE; margin-left:1.5rem; }
@Jasonbamber 回答，我会将其标记为解决方案

标签： html css pseudo-element css-multicolumn-layout

【解决方案1】：

使用h1{position:relative;} 和.child {margin-left:20px;}

.masonry{
  column-count: 3;
  column-gap: 1.5em;
}

.child {
  height: 400px;
  background: #EEE;
  margin-left:20px;
}

span{
  left: -20px;
  position: absolute;
  z-index: 2;
}
.position-relative{
position:relative;
}

span:before{
  content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1.5em .5em;
    border-color: transparent transparent #D36135 transparent;
    z-index: 2;
}

<div class="container">
<div class="masonry p-1">
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
</div>
</div>

【讨论】：

【解决方案2】：

不确定你想要什么，但如果你想要列之前的所有三角形，那么我做了一些调整。我已将所有跨度从 h1 移动到父 div (.child) 并添加了 position:relative;到 .child 类。

你也可以在这里查看..http://jsfiddle.net/aq9Laaew/208868/

.masonry{
  column-count: 3;
  column-gap: 1.5em;
}
.child {
  height: 400px;
  background: #EEE;
  position:relative;
  z-index:1;
  margin-left:20px;
}

span{
  margin-left: -32px;
}
span:before{
  content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 3em 2em;
    border-color: transparent transparent #D36135 transparent;
    z-index: 2;
}

<div class="container">
<div class="masonry p-1">
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
</div>
</div>

【讨论】：

这里还有同样的问题jsfiddle.net/aq9Laaew/208838 我需要三角形在他的列之外并且全部可见
所以如果你添加 margin-left:20px;到 .child 类样式，那么它将起作用。 jsfiddle.net/aq9Laaew/208868

【解决方案3】：

您可以使用边距代替column-gap，并在容器上设置负边距以对齐左侧：

.container{
  overflow:hidden;
}
.masonry{
  column-count: 3;
  column-gap: 0;
  margin-left:-0.75rem;
}

.child {
  height: 400px;
  background: #EEE;
  margin-left:1.5rem;
}

【讨论】：

【解决方案4】：

只需添加到 .child 这个 css：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
backface-visibility: hidden;

http://jsfiddle.net/aq9Laaew/208715/

<div class="container">
  <div class="masonry p-1">
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
  </div>
</div>

.masonry{
   column-count: 3;
   column-gap: 1.5em;
 }

.child {
   height: 400px;
   background: #EEE;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
   page-break-inside: avoid; /* Firefox */
   break-inside: avoid; /* IE 10+ */
   backface-visibility: hidden;
}

span{
   left: -20px;
   position: absolute;
   z-index: 2;
}

span:before{
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 0 1.5em .5em;
   border-color: transparent transparent #D36135 transparent;
   z-index: 2;
}

【讨论】：