Как сделать блоки горизонтально css

Чтобы сделать блоки горизонтально, можно использовать свойство display и добавить блокам элементы управления позиционированием. Рассмотрим два наиболее распространенных способа:

Способ 1: использование свойства inline-block

HTML:

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

CSS:

.block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.container {
  text-align: center;
}

В данном примере мы создали три блока div с классом block и задали им свойство display: inline-block, чтобы они отображались в одну строку. Затем мы задали им ширину и высоту, а также цвет фона.

Для родительского блока div с классом container мы задали свойство text-align: center, чтобы блоки располагались по центру родительского блока.

Способ 2: использование свойства flex

HTML:

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

CSS:

.container {
  display: flex;
  justify-content: center;
}

.block {
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background-color: #ccc;
}

В данном примере мы создали три блока div с классом block и добавили их в родительский блок div с классом container, задав ему свойство display: flex. Затем мы задали свойство justify-content: center, чтобы блоки располагались в центре родительского блока.

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

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