| 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/photo1.jpg" alt="Фотографія 1"> <img src="images/photo2.jpg" alt="Фотографія 2"> <img src="images/photo3.jpg" alt="Фотографія 3"> <img src="images/photo4.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 class="thumb">
<img src="images/photo1.jpg" alt="Фотографія 1">
<img src="images/photo2.jpg" alt="Фотографія 2">
<img src="images/photo3.jpg" alt="Фотографія 3">
<img src="images/photo4.jpg" alt="Фотографія 4">
</p>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Вигляд фотографій, оформлених за допомогою стилів