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

Низкая сложность

Раздел: Форматирование изображений

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. Картинки по горизонтали

HTML5IE 9Cr 16Op 11Sa 5Fx 10

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотографии</title>
 </head>
 <body>
  <p>
    <img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
    <img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
    <img src="images/thumb3.jpg" alt="Фотография 3" width="120" height="120">
    <img src="images/thumb4.jpg" alt="Фотография 4" width="120" height="120">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.

Фотографии, расположенные по горизонтали

Рис. 1. Фотографии, расположенные по горизонтали

Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега <img> в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги <img> в примере в одну строку.

Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom. В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.

Пример 2. Отступы у фотографий

HTML5CSS 2.1IE 9Cr 16Op 11Sa 5Fx 10

<!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 class="thumb">
   <img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
   <img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
   <img src="images/thumb3.jpg" alt="Фотография 3" width="120" height="120">
   <img src="images/thumb4.jpg" alt="Фотография 4" width="120" height="120">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид фотографий, оформленных с помощью стилей

Рис. 2. Вид фотографий, оформленных с помощью стилей

выравниваниеизображения

Если вам понравились материалы сайта, вы можете поддержать сайт, купив Рецепты CSS в формате CHM или в виде набора HTML-файлов за 50 р.