Cuba selaraskan dua kad mendatar bersama-sama supaya bahagian bawah kedua-dua imej berbaris bersama

Question

Kad imej tidak selaras dengan kad di sebelahnya Saya cuba menjajarkan dua kad mendatar supaya bahagian bawah imej berbaris bersama. Ini kod html semasa saya:

<div class="container">
    <div class="row">
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text and more and more
                 </p> 

                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>`

dan kod CSS saya:

.card-block {
                  font-size: 1.2em;
                  position: relative;
                  padding: 1em;
                  border-top: 1px solid rgba(34, 36, 38, .1);
                  box-shadow: none;
                }

                .card {
                  font-size: 1em;
                  overflow: hidden;
                  padding: 5;
                  border-radius: .27rem;
                  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
                  margin-top: 25px;
                }

                .img {
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
                }

Menyiarkan imej semasa. Matlamat saya adalah untuk membuat pesawat sebaris dengan bahagian bawah imej kad kedua. Saya telah menggunakan Bootstrap versi 4 untuk tujuan ini.

Saya cuba menggunakan kod ini:

<div class="container">
    <div class="row">
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text and more and more </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Bawah kad dijajarkan dengan baik di sini, tetapi imej dalam kad pertama tidak sampai ke bahagian bawah. Imej: Pesawat tidak sejajar dengan bahagian bawah imej kedua

Answer 1

Menambah h-100 pada baris kelas div di bawah kelas kad menyelesaikan masalah saya.