Чтобы расположить картинки в ряд в CSS, можно использовать свойства display
и float
.
Например, вот как можно расположить 3 картинки в ряд с использованием свойства float
:
img {
display: inline-block;
float: left;
margin-right: 10px;
}
Здесь мы используем селектор img
для выбора всех изображений на странице, устанавливаем свойство display
в inline-block
, чтобы изображения отображались в одной строке, и свойство float
в left
, чтобы выровнять их по левой стороне контейнера. Свойство margin-right
добавляет небольшой отступ между картинками для лучшей визуальной разделимости.
Если нужно, чтобы последняя картинка в ряду была выровнена по правой стороне контейнера, то нужно добавить следующий CSS-код:
img:last-child {
float: right;
margin-right: 0;
}
Здесь мы используем псевдоселектор :last-child
, чтобы выбрать только последнюю картинку в ряду, и устанавливаем свойство float
в right
, чтобы выровнять ее по правой стороне контейнера. Свойство margin-right
удаляет отступ между последней картинкой и правой границей контейнера.
Еще один способ расположения картинок в ряд — использование свойств display: flex
у родительского элемента и flex: 1
у каждого элемента (картинки). Такой подход позволяет легко управлять расположением элементов на основе разных критериев вроде размера, веса, порядка и т. д.
.container {
display: flex;
}
img {
flex: 1;
}
Здесь мы используем контейнер с классом .container
, устанавливаем для него свойство display
в flex
, чтобы сделать его элементами гибкой контейнерной системы, и каждому изображению добавляем свойство flex
со значением 1
, чтобы каждое изображение занимало одну и ту же долю от доступного места в контейнере. Без оформления нескольких элементов на странице этот пример конечно не даст результатов.