Versuchen Sie, zwei horizontale Karten so auszurichten, dass die Unterseiten der beiden Bilder aneinander ausgerichtet sind

Question

Die Karte des Bildes stimmt nicht genau mit der Karte daneben überein. Ich habe versucht, zwei horizontale Karten so auszurichten, dass die Unterseite des Bildes aneinander ausgerichtet ist. Das ist mein aktueller HTML-Code:

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

und mein CSS-Code:

.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%;
                }

Aktuelles Bild gepostet. Mein Ziel ist es, dass die Ebene mit der Unterseite des zweiten Kartenbilds übereinstimmt. Zu diesem Zweck habe ich Bootstrap Version 4 verwendet.

Ich habe versucht, diesen Code zu verwenden:

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

Der untere Teil der Karte ist hier gut ausgerichtet, aber das Bild auf der ersten Karte reicht nicht bis ganz nach unten. Bild: Die Ebene ist nicht mit der Unterseite des zweiten Bildes ausgerichtet

Answer 1

将 h-100 添加到卡片类下方的 div 类行能够解决我的问题。