将锚链接固定到卡的底部

Question

我使用的是一张卡片，里面有一些文本，但是"探索"；链接需要固定在卡片的底部，而不考虑上面文本的大小。这可以在不使用引导程序类的情况下实现吗。

我的卡预览：

[！[1]][1]

卡片代码：

<div class="ibm-col-12-3 card">
<div class="ibm-card mobileFlex ibm-no-border">
<div class="ibm

.card{
border-style:solid;
height:300px;
}

<div class="card">
<div class="ibm-card mobileFlex ibm-no-border">
<div class="ibm-card__image">
<img id="use-case-img-3" src="" alt="card_3" width="300" height="170" class="ibm-resize"></div>
<div class="ibm-card__content">
<p id="use-case-title-3" class="cardTitle">title of the page </p>
<p id="use-case-sub-title-3" class="cardSubtitle">sub title of the page</p>
<p class="ibm-ind-link">
<a href="javascript:;" onclick="loadUseCasePage('2')" class="ibm-forward-link ibm-light"><span class="ucExplore">Explore</span></a></p>
</div>
</div>
</div>

-卡片_图像">

勘探

Answer 1

使用以下代码来解决问题。

.card{
border-style:solid;
height:200px;
}
.ibm-card{
height: 100%;
display: flex;
flex-direction: column;
}
.ibm-card__content{
flex:1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ibm-ind-link{
margin:0;
}

<div class="card">
<div class="ibm-card mobileFlex ibm-no-border">
<div class="ibm-card__image">
<img id="use-case-img-3" src="" alt="card_3" width="300" height="170" class="ibm-resize"></div>
<div class="ibm-card__content">
<div class="content">
<p id="use-case-title-3" class="cardTitle">title of the page </p>
<p id="use-case-sub-title-3" class="cardSubtitle">sub title of the page</p>
</div>
<p class="ibm-ind-link">
<a href="javascript:;" onclick="loadUseCasePage('2')" class="ibm-forward-link ibm-light">
<span class="ucExplore">Explore</span></a></p>
</div>
</div>
</div>