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

Для расположения двух блоков рядом в CSS можно использовать несколько подходов. Рассмотрим два наиболее распространенных:

1. С помощью свойства display: inline-block;. Установите обоим блокам display: inline-block;, например:

.block1, .block2 {
    display: inline-block;
}

2. С помощью свойства float. Установите одному из блоков float: left;, а другому блоку добавьте свойство margin-left с указанием ширины первого блока, например:

.block1 {
    float: left;
    width: 50%; /* ширина первого блока */
}
.block2 {
    margin-left: 50%; /* на ширину первого блока */
}

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

Пример HTML-кода для двух блоков рядом:

<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>

Пример CSS-кода для расположения блоков рядом при помощи display: inline-block;:

.block1, .block2 {
    display: inline-block;
    width: 50%; /* можно задать ширину блоков */
}

Пример CSS-кода для расположения блоков рядом при помощи float:

.block1 {
    float: left;
    width: 50%;
}
.block2 {
    margin-left: 50%;
}