html - 让 Button 与底部的 div 重叠(CSS/Bootstrap 4 Grid)

Question

在以下情况下我需要您的帮助 - 我只是想不出一个干净简单的方法来解决它。

我想实现如下设计: 3 Boxes with content and overlapping buttons

但是我很难将按钮从 div 中推出，因为它会扩展主 div，或者我无法让它们在移动 View 中正确居中/定位。我当前的代码如下所示(基于 bootstrap 4 网格)(浅蓝色背景应用于第二行中具有容器流体类的 div)

<section id="threeblocks" class="">
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
      </div>
    </div>
  </div>
</section>

我正在考虑在带有背景的 div 下面添加三个额外的列，但是响应式 View 存在问题，其中按钮应该再次位于框中，而不是在所有三个按钮的下面。

所以这个肮脏的解决方案看起来像这样:

<section id="threeblocks" class="">
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
        </div>
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
        </div>
        <div class="col p-5 d-flex flex-column">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
      <div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
      <div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
    </div>
  </div>
</section>

那么知道如何让它们到达这个位置，我可以更改不同断点的位置吗？

提前致谢!

Answer 1

这是一个解决方案，其中按钮位于三个框内，但具有绝对定位，迫使它们溢出 div 底部约一半。

<section id="threeblocks" class="">
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div id="box1" class="col p-5 d-flex flex-column headlineBox">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <button>lorem ipsum</button>
        </div>
        <div id="box2" class="col p-5 d-flex flex-column headlineBox">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <button>lorem ipsum</button>
        </div>
        <div id="box3" class="col p-5 d-flex flex-column headlineBox">
          <h3 class="pb-2">HEADLINE</h3> Content goes here
          <button>lorem ipsum</button>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.headlineBox button{
  background-color: #466f75;
  color: #fff;
  position: absolute;
  bottom:   -10px;
  margin:0 auto;
  display:block;
}

#box1{
  background-color: #e6f4f6;
}
#box2{
  background-color: #d8eef1;
}
#box3{
  background-color: #e6f4f6;
}

Codepen https://codepen.io/Washable/pen/bYwGzR