Совместите большой контент с меньшим содержанием - PullRequest
Новая
       25

Совместите большой контент с меньшим содержанием

0 голосов
/ 24 сентября 2019

У меня есть небольшая проблема с моим первым ассоциативным проектом.

Я хочу получить это:

Mock

Теперь я заблокирован, я незнаю, что делать.
Я пытался использовать: 

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>

Посмотреть на CodePen

1 Ответ

0 голосов
/ 24 сентября 2019

Для вашего правого контента вам нужно настроить второй контент снизу.Вот так: 

<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>

Обратите внимание, что я добавил только встроенные стили, если вам нужны адаптивные макеты, это должно быть сделано как классы.

Любой вопрос по этому поводу, не стесняйтесь задавать.:)

...