Как сделать - выровнять изображения бок о бок
Узнайте, как выровнять изображения бок о бок с 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
:
Пример с плавающей запятой
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding:
5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
Как создать бок о бок изображения со свойством CSS flex
:
Пример Flexbox
.row {
display: flex;
}
.column {
flex: 33.33%;
padding:
5px;
}
Примечание: Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Это до вас, если вы хотите использовать поплавки или Flex для создания трех столбцов макета. Однако, если вам нужна поддержка IE10 и Down, вы должны использовать float.
Совет: Чтобы узнать больше о гибкой модуль макета окна, прочитайте нашу CSS Flexbox главе.
Добавить Адаптивность
При желании можно добавить мультимедийные запросы, чтобы сделать изображения стек поверх друг друга, а не плавающие рядом друг с другом, на определенной ширине экрана.
В следующем примере изображения будут складываться вертикально на экранах, которые 500px в ширину или меньше:
Адаптивный пример
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Подробнее о мультимедийных запросах читайте в нашем учебнике по CSS Media запросам.
Похожие страницы
Чтобы узнать больше о том, как стиль изображения, прочитайте наши CSS Images учебник.
Чтобы узнать больше о CSS float, прочитайте наш CSS float учебник.
Чтобы узнать, как создать галерею изображений с помощью CSS, прочитайте наш Учебник CSS Image Gallery.