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

🕛 19.01.2009, 18:53
Изображения являются встроенными элементами, поэтому написание в коде подряд несколько тегов <IMG> автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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="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. Отступы у фотографий

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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="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>