如何在不使用Bootstrap类的情况下固定卡片内的Explore链接至底部？

当然可以！纯CSS就能搞定这个需求，咱们用现代布局里的Flexbox来实现，简单又靠谱。先帮你理顺代码结构里的小问题，再给出具体实现：

第一步：修正代码中的语法错误 #

你提供的代码里有一段混乱的标签和样式混合写法（比如<div class="ibm .card{ border-style:solid; height:300px; } <div class="card">），这会导致浏览器解析错误，先清理后得到正确的卡片结构：

<div class="ibm-col-12-3 card-container">
  <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>

第二步：添加纯CSS实现固定底部链接 #

给卡片容器和内容区域设置Flexbox属性，就能让“Explore”链接始终贴在底部：

/* 给外层卡片容器设置基础样式和Flex布局 */
.ibm-card {
  display: flex;
  flex-direction: column; /* 垂直排列内部元素 */
  height: 300px; /* 可以根据需求设置固定高度，或者用min-height */
  border-style: solid; /* 你之前想要的边框样式 */
}

/* 让内容区域自动填充剩余空间，把链接推到底部 */
.ibm-card__content {
  flex: 1; /* 占据容器内除图片外的所有可用空间 */
  display: flex;
  flex-direction: column; /* 内容内部也垂直排列 */
}

/* 让链接段落自动贴在内容区域底部 */
.ibm-ind-link {
  margin-top: auto; /* 自动把元素推到容器末端 */
}

原理说明 #

• flex-direction: column让卡片内的元素垂直排列；
• flex:1给内容区域分配了所有剩余空间，不管标题和副标题多长，都会填满中间区域；
• margin-top:auto是Flexbox里的小技巧，它会把元素上方的空间自动填满，从而将链接固定在底部。

如果你不想设置固定高度，也可以把.ibm-card的height换成min-height，这样卡片会根据内容自动拉伸，但链接依然会贴在卡片底部哦。

内容的提问来源于stack exchange，提问作者Suraj Prasad