Как расположить блоки рядом css

Есть несколько способов расположить блоки рядом в CSS, но вот два наиболее распространенных:

  1. Используя свойство display: inline-block. Для этого необходимо установить свойство display для каждого блока на inline-block, а также задать ширину и высоту в соответствующих значениях. Например:
<div class="block1"></div>
<div class="block2"></div>

<style>
  .block1, .block2 {
    display: inline-block;
    width: 50px;
    height: 50px;
  }
</style>
  1. Используя свойство float. Для этого нужно установить свойство float для каждого блока на left или right. Например:
<div class="block1"></div>
<div class="block2"></div>

<style>
  .block1 {
    float: left;
    width: 50px;
    height: 50px;
  }

  .block2 {
    float: left;
    width: 50px;
    height: 50px;
  }
</style>

В обоих случаях блоки будут расположены рядом друг с другом. При использовании второго способа блоки будут выравниваться по левому или правому краю родительского элемента в зависимости от значения свойства float.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как расположить блоки рядом css

Наш специалист свяжется с вами в ближайшее время и уточнит детали