Как сохранить много карточек с изображениями в одной строке в 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>

Этот код решит проблему и выровняет их в один ряд.

Answer 2

Вы можете использовать flex, как это. Вот рабочий пример https://jsfiddle.net/fyckzuhL/

.tab1cards{
 display:flex;
  flex-direction:row;
  justify-content:space-between;
}