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

Question

在我的网站上，我有一个用伪元素的边界制成的三角形：之前。我的问题是，如果我将这些三角形添加到列（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>

Answer 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>

Answer 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>

Answer 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;
}

Answer 4

只需将此CSS添加到case REMOVE_CITY: return [ ...state.filter(city => city !== action.city), ] ：

.child

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

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