Узнать, как выровнять изображения рядом используя HTML, CSS.
Выравненные изображения
Создать выравнивание изображений
Шаг 1) Добавить HTML:
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Снег" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Лес" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Горы" 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 и более ранних версиях. Это зависит от вас, если вы хотите использовать поплавки или flex для создания макета из трех столбцов. Однако, если вам нужна поддержка IE10 и ниже, вы должны использовать float.
Совет: Чтобы узнать больше о модуле гибкая компоновка коробки, читайте наш учебник CSS Флексбокс.
Добавить отзывчивость
При желании вы можете добавить медиа запросы, чтобы изображения складывались друг на друга, а не плавали рядом друг с другом на определенной ширине экрана.
В следующем примере изображения будут складываться вертикально на экранах шириной 500 пикселей или меньше:
/* Адаптивный макет - делает три столбца стека друг на друга, а не рядом друг с другом */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}Попробуйте сами »Чтобы узнать больше о медиа запросах, прочитайте наш учебник CSS Медиа запросы.
Связанные страницы
Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.
Чтобы узнать больше о CSS поплавок, прочитайте наш учебник CSS Поплавок.
Чтобы узнать, как создать галерею изображений с помощью CSS, ознакомьтесь с нашим учебник CSS Галерея изображений.