对齐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>

我怎样才能得到"；获取它"；以及"；喜欢"；总是在卡片的底部？

将CCD_ 1设置为CCD_；得到它"以及"；喜欢"；到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实现布局。方法如下：

首先，您需要将卡中的内容分为两个块(顶部和底部(。

然后，您可以在卡上使用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>

Answer 3

如果您想要按钮"获取它"；以及"；喜欢"；为了始终位于卡片的底部，您可以将do_container设置为flex_grow:1，以使其占用尽可能多的空间，并将元素设置为具有正当内容：之间的空间

.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* add flex */
display:flex;
flex-direction: column;
}
img {
width:220px;
height:150px;
margin-left:auto;
margin-right:auto;
display:block;
}
.do_container {
padding: 2px 16px;
/* add flex-grow to make it fill the height of the container */
flex-grow: 1;
display: flex;
flex-direction: column;
/* make it space-between to set get_it and like button on bottom of card */
justify-content: space-between;
}
.title {
text-align: center;
}
.action_container {
display: flex; 
justify-content: space-between;
}
p {
color:black
}

<div class="do_card">
<img src="https://picsum.photos/200/300">
<div class="do_container">
<p class="title">Lorem Ipsum</p>
<div class="action_container">
<p><a href="https://www.test.com"><i class="test"></i> GET IT</a>
<p>Like</p>
</div>
</div>
</div>