Содержание
Как разместить несколько картинок рядом по горизонтали?
Тема:Форматирование изображений
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов <img> автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).
Пример 1. Картинки по горизонтали
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотографии</title>
</head>
<body>
<p>
<img src="images/thumb1.
jpg" alt="Фотография 1">
<img src="images/thumb2.jpg" alt="Фотография 2">
<img src="images/thumb3.jpg" alt="Фотография 3">
<img src="images/thumb4.jpg" alt="Фотография 4">
</p>
</body>
</html>
jpg" alt="Фотография 1">
<img src="images/thumb2.jpg" alt="Фотография 2">
<img src="images/thumb3.jpg" alt="Фотография 3">
<img src="images/thumb4.jpg" alt="Фотография 4">
</p>
</body>
</html>Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.
Рис. 1. Фотографии, расположенные по горизонтали
Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега <img> в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги <img> в примере в одну строку.
Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom. В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.
Пример 2. Отступы у фотографий
HTML5CSS 2.
1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотографии</title>
<style>
.thumb img {
border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
padding: 15px; /* Расстояние от картинки до рамки */
background: #666; /* Цвет фона */
margin-right: 10px; /* Отступ справа */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<p>
<img src="images/thumb1.jpg" alt="Фотография 1">
<img src="images/thumb2.jpg" alt="Фотография 2">
<img src="images/thumb3.jpg" alt="Фотография 3">
<img src="images/thumb4.jpg" alt="Фотография 4">
</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Вид фотографий, оформленных с помощью стилей
изображениявыравнивание
HTML по теме
- Тег <img>
CSS по теме
- border
- margin-bottom
- margin-right
- padding
html — Картинки разных размеров в ровный ряд
Задать вопрос
Вопрос задан
Изменён
4 года 8 месяцев назад
Просмотрен
2k раз
Хочу сделать картинки(плитку) как на примере
Использую bootstrap 4.
Мой код, до другого пока не додумался:
<div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/4.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/2.jpg"> </div> </div>
Получается такое:
Что я делаю не так? Почему последний квадрат не стал на пустое место. Как правильно написать код?
- html
- css
- bootstrap
3
.wrap {
display: flex;
background: #ccc;
padding: 5px;
}
.col {
display: flex;
flex-direction: column;
}
.col__item {
display: flex;
width: 100px;
height: 100px;
margin: 5px;
background: #f00;
}
. col__item_stretch {
flex: 1;
}
col__item_stretch {
flex: 1;
}<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как выровнять изображения рядом
❮ Назад
Далее ❯
Узнайте, как выравнивать изображения рядом друг с другом с помощью CSS.
Галерея изображений рядом
Попробуйте сами »
Как разместить изображения рядом
Шаг 1) Добавьте HTML:
Пример
<дел >
Шаг 2) Добавьте CSS:
/* Три контейнера изображений (используйте 25% для четырех и 50% для двух и т. д.) */
.column {
float: left;
ширина: 33,33 %;
заполнение:
5 пикселей;
}
/* Очистить плавающие элементы после контейнеров изображений */
.строка::после {
содержание: «»;
ясно: оба;
отображение: таблица;
}
Попробуйте сами »
Как создать параллельные изображения с помощью свойства CSS flex :
Пример Flexbox
.
row {
display: flex;
}
.column {
flex: 33,33%;
заполнение:
5 пикселей;
}
Попробуйте сами »
Примечание. Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Вам решать, хотите ли вы использовать float или flex для создания трехколоночного макета. Однако, если вам нужна поддержка IE10 и более ранних версий, вам следует использовать float.
Подсказка: Чтобы узнать больше о модуле Flexible Box Layout, прочтите нашу
Глава CSS Flexbox.
Добавить отзывчивость
При желании вы можете добавить медиа-запросы, чтобы изображения располагались друг над другом, а не плавали рядом друг с другом на определенной ширине экрана.
В следующем примере изображения будут располагаться вертикально на экранах шириной 500 пикселей или меньше:
Адаптивный пример
/* Адаптивный макет — три столбца располагаются друг над другом
а не рядом друг с другом */
Экран @media и (максимальная ширина: 500 пикселей) {
.
column {
ширина: 100%;
}
}
Попробуйте сами »
Чтобы узнать больше о медиа-запросах, прочитайте наш учебник по медиа-запросам CSS.
Связанные страницы
Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник по изображениям CSS.
Чтобы узнать больше о CSS Float, прочитайте наше руководство по CSS Float.
Чтобы узнать, как создать галерею изображений с помощью CSS, прочитайте наш учебник по галерее изображений CSS.
❮ Предыдущий
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 9005 Tops
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.
CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2
4 |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Отображение изображений подряд (HTML)
спросил
Изменено
4 года, 2 месяца назад
Просмотрено
92к раз
Итак, у меня есть очень простая HTML-страница.
Все, что я хочу, это отображать изображения в одном длинном ряду. Какой самый простой способ, который будет работать во всех браузерах?
<голова>Мое название <тело> <дел>
- html
- изображение
- строка
Если вы хотите, чтобы #images было одной строкой, вы можете отключить перенос слов.
#изображения {
пробел: nowrap;
}
JSFiddle
Посмотрите этот jsbin
Думаю, это самый простой способ:
HTML:
CSS:
ул {
пробел: nowrap;
}
ул, ли {
стиль списка: нет;
дисплей: встроенный;
}
Обновлено: Без переноса!
0
Сделайте контейнер div достаточно широким, чтобы вместить все ваши изображения.