Question

我想将一个div元素放在另一个div元素的下半部分。您可以看到一个简单的标记here

如果为.overlay启用transform属性，则会将元素向下推一半，但父容器的空白区域也可见。有没有机会避免这种情况，并在深灰色div之前获得没有任何空间的解决方案？如果可能有更好的解决方案，我也想避免设置负利润率。

此标记无法修复，如果有必要可以更改。

.overlay {
  height: 200px;
  //transform: translateY(50%);
}

.overlay .col {
  background: #333;
}

.jumbotron {
  height: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="container">
    <div class="row overlay no-gutters">
      <div class="col col-12 mx-auto">

      </div>
    </div>
  </div>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-1 mx-auto">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

除了我可以想到的负边距之外唯一的另一种方法是在.col上使用伪:: after ...

https://www.bootply.com/Ukc9jdDGnM

.overlay .col::after {
    left: 0;
    width: 100%;
    background: #333;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateY(50%);
}

Answer 2

我不太清楚，问题是什么。但如果之前的答案是正确的，那么我所做的只是将height添加到.overlay .col

.overlay .col {
  background: #333;
  height:300px;
}

/* CSS used here will be applied after bootstrap.css */

.overlay {
  height: 200px;
  //transform: translateY(50%);
}

.overlay .col {
  background: #333;
  height: 300px;
}

.jumbotron {
  height: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="container">
    <div class="row overlay no-gutters">
      <div class="col col-12 mx-auto">

      </div>
    </div>
  </div>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-12 mx-auto">
        </div>
      </div>
    </div>
  </div>
</div>

将一个div叠加在其他div上，没有空格

2 个答案: