Чтобы расположить блоки горизонтально, можно использовать CSS свойство display со значением inline-block или inline-flex. Оба значения позволяют задать элементам блочный контекст, но при этом располагать их в строку.
Пример с display: inline-block:
HTML:
<div class="container">
<div class="block red"></div>
<div class="block green"></div>
<div class="block blue"></div>
</div>CSS:
.container {
text-align: center; /* не обязательно, добавляет выравнивание по центру */
}
.block {
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}Пример с display: inline-flex (требуется обернуть блоки в еще один div):
HTML:
<div class="container">
<div class="flex-container">
<div class="block red"></div>
<div class="block green"></div>
<div class="block blue"></div>
</div>
</div>CSS:
.container {
text-align: center; /* не обязательно, добавляет выравнивание по центру */
}
.flex-container {
display: inline-flex;
}
.block {
width: 100px;
height: 100px;
margin: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}Обратите внимание, что display: inline-block иногда может вызывать проблемы с пробелами между элементами в HTML-разметке, а display: inline-flex будет работать не во всех браузерах. Лучше использовать второй вариант только для тех случаев, где это действительно нужно.
