在同一位置用箭头使盒子始终保持相同的高度

Question

我怎么能让这两个盒子总是在同一个高度上，字体真棒箭头总是在同一个位置（右下角，盒子里面）？因此，框应根据内容拉伸，但箭头应始终位于相同位置。这是笔：https://codepen.io/anon/pen/mpprgg?editors=1100

.box {
  background-color: lightblue;
  height: 200px;
  position: relative;
  padding: 30px 30px 50px 30px;
}

<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 float-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 float-right"></i>
        </div>
      </div>
    </div>
  </div> 
</div>

Answer 1

将arrow课程添加到箭头图标中，如下所示：

.arrow {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Answer 2

制作height的{​​{1}}并使用100%，然后使用定位图标：

min-height: 200px

.box {
  background-color: lightblue;
  position: relative;
  padding: 30px 30px 50px 30px;
  height: 100%;
  min-height: 200px;
}
.box i {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

另一个可能性就是依靠flex来将图标放在底部（我认为更好，因为你使用了V4的bootstrap并且所有需要的类都准备好了）：

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 float-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 float-right"></i>
        </div>
      </div>
    </div>
  </div>
</div>

.box {
  background-color: lightblue;
  position: relative;
  padding: 30px 30px 20px 30px;
  height: 100%;
  min-height: 200px;
}
.box h4 {
  margin-bottom: 20px;
}