Чтобы расположить блоки в ряд с помощью CSS, можно использовать свойство display с значением inline-block или flex.
- Использование свойства
inline-block
Это свойство позволяет элементам стать «инлайновыми блоками», т.е. элементы будут выглядеть как инлайн-элементы, но иметь свойства блоков. Их можно располагать горизонтально и вертикально так, как нужно.
.block {
display: inline-block;
}С помощью этого свойства выравниваются как ширина, так и высота элементов, поэтому нужно убедиться, что размеры блоков равны.
Пример размещения трех блоков в ряд:
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>.block {
display: inline-block;
width: 100px; /* Ширина блока */
height: 100px; /* Высота блока */
background-color: red;
margin-right: 10px; /* Отступ между блоками */
}- Использование свойства
flex
Свойство flex позволяет гибко располагать элементы, контролировать расстояние между ними, выравнивать по оси X и Y и т.д.
.container {
display: flex;
}
.block {
width: 100px; /* Ширина блока */
height: 100px; /* Высота блока */
background-color: red;
margin-right: 10px; /* Отступ между блоками */
}В этом примере свойство display: flex; задает контейнеру гибкую раскладку, а блокам можно установить необходимые размеры и отступы. Еще можно задать justify-content если вы хотите гибко контролировать расстояние между блоками.
Пример кода:
.container {
display: flex;
justify-content: space-between; /* расстояние между блоками по возможности одинаковое */
}
.block {
width: 100px; /* Ширина блока */
height: 100px; /* Высота блока */
background-color: red;
}Не забывайте, что свойство display задается для контейнера блоков, а не для самих блоков, которые нужно расположить.
