Поместить товар в контейнер

Question

Я работаю над новым проектом, в котором у меня есть 4 отзыва в карусели. Я хочу, чтобы данные пользователя отображались в одном месте на каждом слайде карусели. Тем не менее, разделы будут отличаться на каждом слайде, так как отзывы не имеют одинаковую длину.

Вот изображение моего желаемого результата .

Что такое лучший способ сделать это?

С уважением,

.asked {
  height: 450px;
  padding: 50px;
  background: #152026;
  transition: all 0.3s;
  border-radius: 10px;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border: 5px solid transparent;
}

#pricingbox {
  height: 100%;
}

.user {
  position: absolute;
  margin-top: 20px;
}

<div class="row">
  <div class="col-xl-8 mx-auto">
    <div class="testimonial owl-carousel">
      <div class="asked">

        <p>“I joined a few months back and this group has helped me become successful in copping many drops - Yeezy, Off-White, Supreme, etc. Didn’t know becoming a reseller was in a league of its own. Also, BRICKS don’t exist here. We profit off everything!”</p>

        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>SilveR</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“This group has really helped me make a lot of profit, everyone is really friendly and helpful.”</p>


        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>xDyzzii</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“Been in the group since beta, friendly staff and users, very good atmosphere top info and support”</p>

        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>Ravio</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>


        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>Mwilmore</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
    </div>

  </div>
</div>

Answer 1

Используя display: flex, вы можете сохранить абзац текста выровненным по верху, а пользовательскую информацию выровненным по низу.

Я удалил position: absolute; из раздела .user.

.asked {
        height: 200px;
        padding: 50px;
        background: #152026;
        transition: all 0.3s;
        border-radius: 10px;
        position: relative;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        border: 5px solid transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #pricingbox{
        height: 100%;
    }

    .user{
        margin-top: 20px;
    }

<div class="row">
                <div class="col-xl-8 mx-auto">
                    <div class="testimonial owl-carousel">
                        <div class="asked">
                            
                            <p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>
                            
                            
                            <section class="user">
                            <div class="media align-items-center">
                                <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
                                <div class="media-body">
                                    <h3>Mwilmore</h3>
                                    <h4>Nexus Resell Member</h4>
                                </div>
                            </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>