Как расположить картинки в ряд html: Как разместить несколько картинок рядом по горизонтали?

Содержание

Как разместить несколько картинок рядом по горизонтали?

Тема:Форматирование изображений

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>

Результат данного примера показан на рис. 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

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

Заказать сайт

Искать везде

Искать везде
CMS
Интернет-магазин 2. 0
Интернет-магазин 1.0
Onicon
Maliver
Rekmala
Pablex

Кабинет и почта
CRM
Интеграции CMS.S3

Главная / Главная / Работа с текстовым редактором / Старый интерфейс (TinyMCE 3) / Работа с изображениями / Как разместить изображения по нескольку в ряд?

Шаг 1

Чтобы разместить несколько изображений на странице, необходимо зайти в редактор нужной Вам страницы (или иного объекта, подразумевающего работу с текстовым редактором), нажав кнопку «Редактировать содержимое»

Шаг 2

В открывшемся меню перейдите к редактированию текста страницы.

Шаг 3

В редакторе нажмите на кнопку добавления/изменения таблиц

Шаг 4

Задайте параметры таблицы. Параметр «Выравнивание» в таблице рекомендуется установить в значении «По центру», «Класс — Таблица без рамки».

Шаг 5

В рабочей области текстового редактора появилась таблица.

Поставьте курсор в ту ячейку таблицы, в которой собираетесь разместить изображение.

Кликните на кнопку «Вставить изображение из галереи».

Откроется раздел «Иллюстраций» — выберите в нем нужное Вам изображение. Если оно еще не загружено, предварительно добавьте его.

Шаг 6

Выбранная Вами фотография будет установлена в ячейку.

Для того чтобы выровнять изображение по центру ячейки, необходимо кликнуть по нему и нажать на кнопку выравнивания «По центру».

Шаг 7

На сайте расположенные таким образом картинки примут следующий вид.

Была ли статья вам полезна?

Да

Нет

Укажите, пожалуйста, почему?

Рекомендации не помогли
Нет ответа на мой вопрос
Содержание статьи не соответствует заголовку
Другая причина

Комментарий

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

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

Галерея изображений рядом

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

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

Шаг 1) Добавить HTML:

Пример

9002 0

<дел >

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

040 /* Три контейнера изображений (используйте 25% для четырех и 50% для двух и т. д.) */
.column {
float: left;
ширина: 33,33 %;
заполнение: 5 пикселей;
}

/* Очистить плавающие элементы после контейнеров изображений */

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

Пример Flexbox

.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.

❮ Предыдущий Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Основные примеры

ФОРУМ | О

css — выравнивание изображений рядом в HTML

спросил 8 лет, 11 месяцев назад

Просмотрено 282к раз

Я хочу 3 изображения рядом с подписью, на данный момент у меня есть 3 изображения, идущие сверху вниз, с подписью слева, а не по центру. Как сделать, чтобы изображения отображались рядом с подписью посередине? Спасибо.

<дел>

Это изображение 1

Это изображение 2

Это изображение 3

HTML
CSS
выравнивание

Вы имеете в виду что-то вроде этого?

 <дел>
    <дел>
        
        Это изображение 1