Чтобы расположить блоки рядом с помощью CSS, нужно использовать свойство display
и взять значение inline-block
или flex
.
Свойство display: inline-block
используется для создания блоков в виде строчных элементов друг за другом, при этом они остаются блочными элементами. Это означает, что к ним можно применять все свойства блочных элементов, но они располагаются горизонтально, как строчные элементы. Например:
.block {
display: inline-block;
}
Здесь мы устанавливаем свойство display
для класса .block
в inline-block
, чтобы расположить блоки, относящиеся к этому классу, рядом друг с другом.
Свойство display: flex
используется для создания гибкой контейнерной системы, которая позволяет быстро и легко управлять размещением элементов внутри контейнера, включая их расположение в строку или столбец. Например:
.container {
display: flex;
}
.block {
flex: 1;
}
Здесь мы устанавливаем свойство display
для класса .container
в flex
, чтобы создать гибкий контейнер. Затем мы устанавливаем каждый блок, который должен располагаться рядом, на flex: 1
, чтобы равномерно распределить пространство между блоками в контейнере.
Оба эти метода являются эффективными и быстрыми способами управления расположением блоков рядом в CSS.