Как расположить картинки в ряд CSS

Чтобы расположить картинки в ряд в 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, чтобы каждое изображение занимало одну и ту же долю от доступного места в контейнере. Без оформления нескольких элементов на странице этот пример конечно не даст результатов.