在 flex 底部对齐 div

Question

我有这张卡：

.do_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
}

.do_container {
  padding: 2px 16px;
}

<div class="do_card">
  <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
  <div class="do_container">
    <p style="text-align: center;">Lorem Ipsum</p>
    <div style="display: flex; justify-content: space-between;">
      <p><a href="https://www.test.com" style="color:black"><i class="test"></i> GET IT</a>
        <p>Like</p>
    </div>
  </div>
</div>

如何让“GET IT”和“Like”始终位于卡片底部？

将do_card 设置为position: relative; 和带有“Get it”和“Like”的 div 到position: absoulute; bottom:0px; 不起作用

Answer 1

为确保设置为 absolute 的内容保留在所需元素（在您的情况下为卡片）内，请确保将其父级设置为 position: relative;（在您的情况下为 .do_card）

正如评论中提到的，它似乎对我有用：

<style>
.do_card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
  position: relative;
}

.do_container {
  padding: 2px 16px;
}
</style>


<div class="do_card">
   <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
  <div class="do_container">
    <p style="text-align: center;">Lorem Ipsum</p> 
    <div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
        <p><a href="https://www.test.com" style="color:black"><i class="test"></i> GET IT</a>
        <p>Like</p>
      </div>
  </div>
</div>

Answer 2

我希望尽可能采用“非绝对”解决方案。事实上，你可以使用 flexbox 来实现布局。方法如下：

首先，您需要将卡片内的内容分成 2 个区块（顶部和底部）。

然后，您可以在卡上使用flex-direction: column; 和justify-content: space-between;。

.do_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 220px;
  height: 320px;
  /* vertical stretched alignment */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.do_card img {
  max-width: 100%;
}

.do_container {
  padding: 2px 16px;
}

.do_container_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="do_card">
  <!-- top -->
  <div class="do_container">
    <img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
    <p style="text-align: center;">Lorem Ipsum</p>
  </div>

  <!-- bottom -->
  <div class="do_container_bottom">
    <a href="https://www.test.com" style="color:black"><i class="test"></i> GET IT</a>
    <p>Like</p>
  </div>
</div>