时间戳

首页 > 解决方案 > 将锚链接固定到卡片底部

javascript - 将锚链接固定到卡片底部

问题描述

我正在使用其中包含一些文本的卡片，但是无论上面的文本大小如何，都需要将“探索”链接固定到卡片的底部。这可以在不使用引导类的情况下实现吗？

我的卡片预览：

[![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>

-card__image">

探索

标签： javascripthtmljquerycss

解决方案

使用下面的代码来解决问题。

.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>

推荐阅读