如何使两个box高度始终一致且Font Awesome箭头固定在右下角？

嘿，我来帮你搞定这个需求！要让两个盒子始终等高，同时把Font Awesome箭头固定在盒子内部右下角，咱们可以通过调整CSS布局来实现，具体步骤如下：

核心修改点 #

1. 让盒子自动等高 #

原来的.box设置了固定高度height:200px，这会限制盒子随内容拉伸，而且没法保证两个盒子高度一致。咱们可以这么改：

• 移除.box的固定height:200px，换成height:100%，让盒子填满父级Bootstrap列的高度
• 利用Bootstrap的Flex布局特性，默认情况下.row已经是flex容器，它的子元素.col会自动等高，所以内部的.box设置100%高度后，两个盒子就会保持一致高度，还能随内容自动拉伸

2. 固定箭头到右下角 #

原来的float-right会让箭头跟着内容流动，没法固定位置。咱们可以利用绝对定位来实现：

• 因为.box已经设置了position:relative，所以箭头可以设置为position:absolute，这样它的定位会相对于.box
• 设置right:30px和bottom:30px，和.box的内边距对应，确保箭头刚好在右下角的内边距区域里
• 移除原来的float-right类

修改后的完整代码 #

CSS部分 #

.box {
  background-color: lightblue;
  /* 移除固定高度，换成100%填满父级 */
  height: 100%;
  position: relative;
  padding: 30px 30px 50px 30px;
}

/* 箭头的定位样式 */
.box .fa-long-arrow-right {
  position: absolute;
  right: 30px;
  bottom: 30px;
  /* 可选：如果箭头被内容盖住，加个层级 */
  z-index: 1;
}

HTML部分 #

<div class="container">
  <div class="boxes">
    <div class="row">
      <div class="col-md-4 offset-md-2">
        <div class="box">
          <h4>
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia laudantium autem omnis saepe officia alias...</div>
          </h4>
          <i class="fa fa-long-arrow-right"></i>
        </div>
      </div>
      <div class="col-md-4">
        <div class="box">
          <h4>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia laudantium laudantium autem autem omnis saepe officia alias...
          </h4>
          <i class="fa fa-long-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 如果你的Bootstrap版本比较旧，.row可能不是默认flex布局，那可以给.row加上d-flex align-items-stretch类，强制开启flex并让列高度拉伸一致
• 箭头的right和bottom值可以根据你的内边距需求调整，确保位置符合预期

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