Для расположения двух блоков рядом в CSS можно использовать несколько подходов. Рассмотрим два наиболее распространенных:
- С помощью свойства
display: inline-block;. Установите обоим блокамdisplay: inline-block;, например:
.block1, .block2 {
display: inline-block;
}
- С помощью свойства
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%;
}





