javascript - 将元素放置在容器中

Question

我正在做一个新元素，我在轮播中显示了 4 个推荐。我想让用户详细信息显示在轮播每张幻灯片的同一位置。但是，每张幻灯片上的部分都会有所不同，因为推荐书的长度不同。

这是一个 image of my desired result .

执行此操作的最佳方法是什么？

亲切的问候，

.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，您可以使文本段落与顶部对齐，而用户信息与底部对齐。

我从 .user 部分删除了 position: absolute;。

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