Как выравнивать изображения параллельно

Учимся, как выравнивать изображения параллельно с помощью CSS.

Как разместить изображения в ряд

Шаг 1 - Добавьте HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Шаг 2 - Добавьте CSS:

Как использовать CSS float Свойства создания параллельных изображений:

Пример浮动

/* Три контейнера для изображений (четыре контейнера используют 25%, два контейнера используют 50%, и т.д.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Удаление浮动 после контейнера изображений */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Попробуйте сами

Как использовать CSS flex Свойства создания параллельных изображений:

Примеры гибкого макета

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Попробуйте сами

Внимание:Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Использование float или flex для создания макета с тремя колонками зависит от вас. Но если вам нужно поддерживать IE10 и более ранние версии, вы должны использовать float.

Совет:Для получения дополнительной информации о модуле гибкого макета прочитайте нашу Урок CSS Flexbox.

Добавление адаптивности

Или вы можете добавить медиа-запросы, чтобы изображения堆积ались на определенной ширине экрана, а не параллельно.

Следующий пример будет堆积 изображение вертикально на экранах шириной 500px или меньше:

Примеры для адаптивной разметки

/* Респонсивная разметка - делает три колонки堆стыми, а не параллельными */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Попробуйте сами

Для получения дополнительной информации о медиа-запросах прочитайте нашу Урок CSS Медиа-запросов.

Связанные страницы

Урок:CSS изображения

Урок:CSS Флоат

Урок:CSS библиотека изображений