Как сделать горизонтальный div вместо вертикального с помощью CSS

Вопрос или проблема

echo '<div class="makeitseo">';
foreach ( $res as $service ) {               
    $serv = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $service->keyword) ) ) . "-k" . $service->id ;    
    echo 
    '<div class="cell"><a href="' . $serv .'"><img src="' . $service->image . '">'
    .'<br>' . $service->keyword .
    '<br>' . $service->texte .
    '</a></div>';
}

echo '</div>';

.makeitseo{
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
.cell {

  margin: 10px, 10px, 10px, 10px;
  height: 400px;
  width: 400px;
  padding: 2px;
  display: flex;
  align-items: center;
  overflow: auto;
}

    <style>
        .makeitseo{
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
img {
    width: 100%;
}
.cell {
    margin: 10px 10px 10px 10px;
    height: 400px;
    width: 400px;
    padding: 2px;
    display: flex;
    align-items: center;
    overflow: auto;
    flex-direction: column;
}
    </style>  

.

Ответ или решение

Чтобы изменить расположение блоков (div) с вертикального на горизонтальное в вашем коде, необходимо внести некоторые изменения в CSS-стили. В частности, вы используете свойство flex-direction, чтобы управлять направлением размещения детей внутри flex-контейнера. Также важно корректно задавать отступы и размеры, чтобы избежать проблем с отображением.

1. Обновление CSS для горизонтального отображения

Ниже приведены основные изменения, которые следует внести в ваш CSS-код:

.makeitseo {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Позволяет элементам перенестись на следующую строку при нехватке места */
}

.cell {
  margin: 10px; /* Убираем запятые, чтобы задать правильные отступы */
  height: 400px;
  width: 400px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center; /* Центрируем содержимое внутри блока */
  overflow: auto;
}

2. Как работает этот код?

• :flex и flex-wrap: В makeitseo применяются свойства display: flex; и flex-wrap: wrap;. Это делает так, что все дочерние элементы .cell будут расположены горизонтально. Если не хватает места, элементы будут переноситься на новую строку.

• justify-content: center: Это свойство отвечает за выравнивание элементов по горизонтали. Оно будет центровать ваши блоки внутри родительского контейнера.

• Отступы: Замените margin: 10px, 10px, 10px, 10px; на margin: 10px;. Запятые в этом контексте неверны и могут привести к неожиданным результатам.

3. Проверка отображения изображений

Если изображения, размещенные внутри блока .cell, нужно масштабировать по ширине, добавьте следующий CSS-код:

img {
  width: 100%; /* Устанавливает ширину изображения на 100% от родительского блока */
  height: auto; /* Сохраняет пропорции изображений */
}

4. Итог

После внесения этих изменений ваши div’ы должны автоматически располагаться горизонтально, и их размеры будут соответствовать установленным вами значениям. Эти стили позволяют также компактно уместить элементы, при этом предоставляя возможность их переноса на следующую строку, если браузер не может разместить их в одном ряду.

При применении этих рекомендаций ваш код будет выглядеть более профессионально, а конечный результат будет визуально привлекательным и функциональным.