javascript - 如何在 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>

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