如何在 HTML 和 CSS 中将多张图片卡保持在同一行

Question

我在我的 html 页面中的同一行中创建了四张卡片。但是当我调整窗口大小（减小窗口大小）时，右上角的卡片正在下降。它们不保持在一条线上。我怎样才能保持即使我调整窗口大小，我的所有卡片都在同一行？

<div class="tab1cards">
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px;">
                    <h4><b>Wild Life</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Heritage</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Beach</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Sri lanka</b></h4>
                </div>
            </div>

这是样式表

.card{
    float: left;
    padding: 16px;
    text-align: center;
}

Answer 1

.card {
  padding: 16px;
  text-align: center;
}

.tab1cards {
  display: flex;
  flex-direction: row;
}

<div class="tab1cards">
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px;">
    <h4><b>Wild Life</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Heritage</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Beach</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Sri lanka</b></h4>
  </div>
</div>

此代码将解决问题并将它们对齐为一行。