Question

是否可以在左侧元素而不是右侧添加相似的背景（使用伪元素或其他元素）？无法使用伪元素实现此目的，因为伪元素会不断出现在包含元素的开头，因此我只能在右边的列中实现此效果。

* {
  box-sizing: border-box;
  margin: 0;
}

.wrapper {
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.container {
  padding: 0 15px;
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.col-left,
.col-right {
  padding: 0 15px;
  flex-grow: 1;
  text-align: center;
  height: 500px;
}

.col-left {
  width: 70%;
}

.col-right {
  width: 30%;
} 

.col-right::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  width: 50%;
  margin-left: -15px;
  background-color: lightgray;
}

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-left"><h1>Left</h1></div>
      <div class="col-right"><h1>Right</h1></div>
    </div>
  </div>  
</div>

Answer 1

您可以使伪元素相对于其列，并使用较大的宽度来产生溢出：

* {
  box-sizing: border-box;
  margin: 0;
}

.wrapper {
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.container {
  padding: 0 15px;
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.col-left,
.col-right {
  padding: 0 15px;
  flex-grow: 1;
  text-align: center;
  height: 500px;
  position:relative;
}

.col-left {
  width: 70%;
}

.col-right {
  width: 30%;
} 

.col-right::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top:-20px;
  bottom:0;
  width: 100vw;
  background-color: lightgray;
}
.col-left::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20px;
  right:0;
  bottom:0;
  width: 100vw;
  background-color: green;
}

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-left"><h1>Left</h1></div>
      <div class="col-right"><h1>Right</h1></div>
    </div>
  </div>  
</div>

Answer 2

说明：当前，列宽与包装器有关，因为包装器具有样式定义position：relative。我们希望列的宽度与类“ row”的div相关。因此，如果您提供position。相对于.row，则“ col-left”和“ col-right”将具有您期望的宽度。

做什么：要获得预期的结果，请在行类定义中添加line position：relative。

   .row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -15px;
      margin-right: -15px;
      position:relative;
    }

现在要获得左侧效果，请添加以下代码

.col-left::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  width: 70%;
  margin-left: -15px;
  background-color: lightgray;
}

使用pseduo元素的列背景

2 个答案: