Question

在以下情况下我需要你的帮助 - 我只是想弄清楚一种干净而简单的解决方法。

我想实现以下设计： 3 Boxes with content and overlapping buttons

但我努力将按钮推出div，因为它扩展了主要的div或者我无法让它们在移动视图中正确居中/定位。我当前的代码看起来像这样（基于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下方添加三个aditional cols和背景，但是响应式视图存在问题，其中按钮应该再次位于框中，而不是位于所有三个框之下。

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

<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

让Button在底部重叠div（CSS / Bootstrap 4 Grid）

1 个答案: