css - 将大内容与小内容对齐

Question

我的第一个关联元素有点问题。

我想得到:

现在我被封锁了，我不知道该怎么办。
我试过使用:

object-fit: cover;

我想我遗漏了一些概念。
你能帮帮我吗？

.engagements {}

.engagements-title {
  text-align: center;
}

.engagements-bigcard {
  margin-bottom: 20px;
}

.engagements-bigcard-image {}

.engagements-bigcard-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.engagements-card {
  margin-bottom: 20px;
}

.engagements-card-image {}

.engagements-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.engagements-card-date {
  margin-top: 15px;
  font-size: 16px !important;
  font-weight: normal !important;
  font-family: 'Montserrat', sans-serif !important;
  background-color: #0085C0;
  padding: 15px !important;
}

.engagements-bigcard-image {
  position: relative;
}

.engagements-bigcard-image-play {
  width: 60px;
  height: 60px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 10px;
  background-color: #f7f9fd;
  position: absolute;
}

.engagements-bigcard-image-play i {
  width: 53px;
  height: 53px;
  line-height: 53px;
  background-color: #fff;
  display: block;
  text-align: center;
  font-size: 50px;
  color: #0d4c91;
}

.engagements-card-image {
  position: relative;
}

.engagements-card-image-play {
  width: 60px;
  height: 60px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 10px;
  background-color: #f7f9fd;
  position: absolute;
}

.engagements-card-image-play i {
  width: 53px;
  height: 53px;
  line-height: 53px;
  background-color: #fff;
  display: block;
  text-align: center;
  font-size: 50px;
  color: #0d4c91;
}

<div class="engagements">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="engagements-title section-title">Nos engagements</div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <div class="engagements-bigcard">
          <div class="engagements-bigcard-image">
            <img src="http://mockmenel2.marcq.me/img/1.jpg" class="img-fluid" alt="">
            <div class="engagements-bigcard-image-play"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
          </div>
          <div class="engagements-card-date badge badge-primary">25/03/2019</div>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="row">
          <div class="col-lg-12">
            <div class="engagements-card">
              <div class="engagements-card-image">
                <img src="http://mockmenel2.marcq.me/img/2.jpg" class="img-fluid" alt="">
                <div class="engagements-card-image-play"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
              </div>
              <div class="engagements-card-date badge badge-primary">25/03/2019</div>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="engagements-card">
              <div class="engagements-card-image">
                <img src="http://mockmenel2.marcq.me/img/3.jpg" class="img-fluid" alt="">
                <div class="engagements-card-image-play"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
              </div>
              <div class="engagements-card-date badge badge-primary">25/03/2019</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

View on CodePen

Answer 1

在你的右边内容上，你需要将第二个内容调整到底部。像这样:

<div class="col-lg-3">
 <div class="row" style="height: 100%;">
  <div class="col-lg-12">
   <div class="engagements-card">
    <div class="engagements-card-image">
     <img src="http://mockmenel2.marcq.me/img/2.jpg" class="img-fluid" alt="">
     <div class="engagements-card-image-play"><i class="fa fa-play-circle-o" aria hidden="true"></i></div>
    </div>
   <div class="engagements-card-date badge badge-primary">25/03/2019</div>
  </div>
 </div>
 <div class="col-lg-12">
  <div class="engagements-card" style=" bottom: 0;position: absolute;">
   <div class="engagements-card-image">
    <img src="http://mockmenel2.marcq.me/img/3.jpg" class="img-fluid" alt="">
    <div class="engagements-card-image-play"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
   </div>
   <div class="engagements-card-date badge badge-primary">25/03/2019</div>
   </div>
  </div>
 </div>
</div>

请注意，我只添加了内联样式，如果您需要响应式布局，那应该作为类来完成。

关于此的任何问题，请随时提出。 :)