将元素始终放在底部？

Question

我只是用网格创建了一个简单的响应式布局，并在每个盒子中都有一个页脚，我想始终保持在底部： 屏幕

我不知道在此特定情况下如何进行，因为没有固定的大小。

我的代码看起来像这样：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 4%;
}

.col {
  display: relative;
  background-color: #f6f6f6;
  padding: 2rem;
}

.wrapper {
  display: flex;
  width: 70%;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div class="col">
      <h2>Der Besuch der alten Dame</h2>
      <h4>Ein Drama von Friedrich Dürrenmatt</h4>
      <p>Das beschauliche Güllen bekommt Besuch von einer Milliardärin, die viel Geld verspricht, wenn eine im Grunde unerfüllbare Bedingung eingelöst wird. Nun beginnt es zu rumoren im Ort.</p>
      <div class="wrapper">
        <h4>Fr, 5.10.</h4>
        <h4>20 Uhr</h4>
        <button class="hero-btn" type="button" name="button">+</button>
      </div>
  </div>
</div>

非常感谢！

Answer 1

您可以使用display：flex带有flex-flow：column，然后在底部使用保证金 - top：auto。

.col{
  width:300px;
  height:150px;
  display: flex;
  flex-flow: column;  
  border: 1px solid black;   
}
.a{
  background-color:yellow;
}
.b{
  background-color:green;
}
.c{
  margin-top:auto;  
  background-color:orange;
}

<div class="col">
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
</div>