Разделы

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

Изображения являются встроенными элементами, поэтому написание в коде подряд несколько тегов <IMG> автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.

Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).

Пример 1. Картинки по горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фотографии</title>
 </head>
 <body>
  <p>
   <img src="thumb1.jpg" alt="Фотография 1" width="120" height="120">
   <img src="thumb2.jpg" alt="Фотография 2" width="120" height="120">
   <img src="thumb3.jpg" alt="Фотография 3" width="120" height="120">
   <img src="thumb4.jpg" alt="Фотография 4" width="120" height="120">
  </p>
 </body>
</html>

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

Рис. 1

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Фотографии</title>
  <style type="text/css">
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 15px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <p class="thumb">
   <img src="thumb1.jpg" alt="Фотография 1" width="120" height="120">
   <img src="thumb2.jpg" alt="Фотография 2" width="120" height="120">
   <img src="thumb3.jpg" alt="Фотография 3" width="120" height="120">
   <img src="thumb4.jpg" alt="Фотография 4" width="120" height="120">
  </p>
 </body>
</html>

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

Рис. 2

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

Валентин, 11.04.2009

Большое спасибо!

Татьяна , 05.12.2009

Очень помогли, благодарю!

Bright_DROYD, 06.05.2010

Спасибо! Парадоксально и просто!

Артем, 29.09.2010

Статья очень помогла. Спасибо!

Разделы

Термины

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

Отправить комментарий