CSS как расположить блоки в ряд

Чтобы расположить блоки в ряд с помощью CSS, можно использовать свойство display с значением inline-block или flex.

1. Использование свойства inline-block

Это свойство позволяет элементам стать «инлайновыми блоками», т.е. элементы будут выглядеть как инлайн-элементы, но иметь свойства блоков. Их можно располагать горизонтально и вертикально так, как нужно.

.block {
  display: inline-block;
}

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

Пример размещения трех блоков в ряд:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.block {
  display: inline-block;
  width: 100px; /* Ширина блока */
  height: 100px; /* Высота блока */
  background-color: red;
  margin-right: 10px; /* Отступ между блоками */
}

2. Использование свойства flex

Свойство flex позволяет гибко располагать элементы, контролировать расстояние между ними, выравнивать по оси X и Y и т.д.

.container {
  display: flex;
}

.block {
  width: 100px; /* Ширина блока */
  height: 100px; /* Высота блока */
  background-color: red;
  margin-right: 10px; /* Отступ между блоками */
}

В этом примере свойство display: flex; задает контейнеру гибкую раскладку, а блокам можно установить необходимые размеры и отступы. Еще можно задать justify-content если вы хотите гибко контролировать расстояние между блоками.

Пример кода:

.container {
  display: flex;
  justify-content: space-between; /* расстояние между блоками по возможности одинаковое */
}

.block {
  width: 100px; /* Ширина блока */
  height: 100px; /* Высота блока */
  background-color: red;
}

Не забывайте, что свойство display задается для контейнера блоков, а не для самих блоков, которые нужно расположить.