html - 在 Bootstrap 网格中对齐大小不等的图像

Question

我在 3 x 4 列的 Bootstrap 网格中使用了 3 张尺寸不等的图像:

哪些打乱了我的布局。我想要实现的是:

通过 CSS 实现此结果的正确方法是什么？

 <div class="row text-center">

        <div class="col-md-4 mb-3 mb-md-0">
          <div class="image-1">
           <img src="assets/img/image_1.svg" class="mb-3">                      
            <h4>Lorem Ipsum</h4>
            <p>
              Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div> 
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-2">
            <img src="assets/img/image_2.svg" class="mb-3">
            <h4>Dolor Sit Amet</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-3">
              <img src="assets/img/image_3.svg" class="mb-3">
            <h4>consetetur sadipscing</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
      </div>

Answer 1

您可以在具有最小高度的盒子上添加顶部填充，同时使用 box-sizing 属性保留盒子大小并将其设置为 border-box。这样内部内容会缩小到底部而不会影响外层