Как сделать блоки в одну строку css

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

Способ 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: использование свойства float

HTML:

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

CSS:

.block {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: #ccc;
}

.container {
  overflow: hidden;
}

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

Для родительского блока div с классом container мы задали свойство overflow: hidden, чтобы он растягивался по высоте, согласованной с высотой дочерних блоков.

Есть также другие способы выравнивания блоков в одну строку, но эти два являются наиболее простыми и универсальными.