如何在一行相似div中统一定位VIEW DETAILS按钮？

问题详情 #

• 页面结构：一行包含多个.col-lg-4容器，每个容器内的.icon-box包含SVG图标、标题、描述文本和「VIEW DETAILS」按钮
• 核心问题：部分div中的按钮会溢出父容器，且不同div的按钮位置不统一
• 预期效果：所有div的按钮位置完全一致，不受内部内容长度影响，无溢出情况

对应HTML代码 #

<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
  <div class="icon-box iconbox-blue">
    <div class="icon">
      <svg width="100" height="100" viewbox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <path stroke="none" stroke-width="0" fill="#f5f5f5"
          d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174">
        </path>
      </svg>
      <i class="bx bx-check-shield"></i>
    </div>
    <h4><a href="">Test Text Heading</a></h4>
    <p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p>
    <a href="#"><button class="button-33" style="margin-top: 40px; width: 100%;">VIEW DETAILS</button></a>
  </div>
</div>

已尝试但无效的方案 #

• 使用position: absolute+bottom/right定位按钮
• 调整.icon-box和按钮的width/height/max-width属性
• 通过浏览器开发者工具排查冲突样式、异常边距/内边距

排查思路与解决建议 #

核心思路：利用Flexbox实现固定底部按钮 #

父容器已使用Bootstrap的d-flex align-items-stretch保证等高，只需给.icon-box设置Flex布局，让内容区自动填充空间，按钮固定在底部。

具体CSS代码 #

.icon-box {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承父容器的拉伸高度 */
  padding: 1rem; /* 统一内边距，避免内容贴边 */
  box-sizing: border-box; /* 确保内边距不增加容器总高度 */
}

.icon-box > p {
  flex-grow: 1; /* 让描述文本区域自动填充剩余空间，把按钮挤到底部 */
  overflow-y: auto; /* 可选：文本过长时显示滚动条，避免撑高容器 */
  margin-bottom: 1rem; /* 给按钮预留间距 */
}

.icon-box .button-33 {
  margin-top: auto; /* 替代固定margin-top，自动顶到容器底部 */
  width: 100%;
  box-sizing: border-box; /* 确保按钮宽度包含内边距/边框，不溢出 */
}

额外注意事项 #

1. 移除按钮上的内联margin-top:40px，避免和margin-top:auto冲突
2. 检查.icon-box是否存在固定高度设置，若有改为height:100%继承父容器高度
3. 确保所有.col-lg-4容器的align-items-stretch样式未被其他CSS覆盖
4. 若按钮仍溢出，检查按钮是否有未被box-sizing:border-box包含的padding或border

内容的提问来源于stack exchange，提问作者Chiranjit Tech