| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати підпис під фотографією так, щоб вони одночасно обтекались довколишніх текстом.
Рішення
Підпис під фотографією зазвичай застосовується для коментування зображення і короткого опису. Хоча додати підпис можна за допомогою звичайного абзацу, цей спосіб не працює, як тільки фотографію необхідно розташувати по правому або лівому краю веб-сторінки. Підпис має бути нерозривна з зображенням, незалежно від способу його розташування на сторінці.
Щоб зв'язати фотографію і підпис до неї воєдино, їх слід помістити в один блок і присвоїти йому ім'я класу, до якого будуть застосовуватися стильові параметри. Такий блок можна вирівнювати по правому або лівому краю, додаючи стильове властивість float зі значенням right чи зліва, а також задавати колір фону і параметри рамки (приклад 1).
Приклад 1. Підпис під фотографією
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Підпис зображення</title>
<style>
.sign {
float: right; /* Вирівнювання по правому краю */
border: 1px solid #333; /* Параметри рамки */
padding: 7px; /* Поля всередині блоку */
margin: 10px 0 5px 5px; /* Відступи навколо */
background: #f0f0f0; /* Колір фону */
}
.sign figcaption {
margin: 0 auto 5px; /* Відступи навколо абзацу */
}
</style>
<!--[якщо lt IE 9]>
<script>
document.createElement ('figure');
document.createElement ('figcaption');</script>
<![endif]-->
</head>
<body>
<figure class="sign">
<p><img src="images/helen.jpg" alt="Скульптура"></p>
<figcaption>Дерев'яна скульптура</figcaption>
</figure>
<p>Мистецтво дерев'яної скульптури в Україні має давні традиції. Є припущення, що дерево як матеріал для скульптури використовували уже в період трипільської культури. Описи святилищ (капищ) давніх слов’ян-язичників свідчать про встановлення дерев’яних ідолів у них (зокрема статуї Перуна у Києві). Певне уявлення про такі вироби дають нечисельні кам’яні скульптури 9–11 ст., наприклад, Збруцький ідол, спосіб і прийоми створення якого тотожні і техніці дерев'яної скульптури тих часів.</p>
</body>
</html>
Результат цього прикладу показано на рис. 1. Для блоку використовується тег <figure>, а для підпису до зображення тег <figcaption>. Старі версії IE не розуміють ці теги, тому спеціально для них додається невеликий скрипт.
Рис. 1. Фотографія з підписом, вирівняний по правому краю сторінки
Оскільки в нашому випадку ширина блоку з фотографією не задавалася, то вона визначатиметься автоматично виходячи з розміру зображення і підпис до нього. Як видно на рис. 1 такий підхід призводить до того, що відступи ліворуч і праворуч від фотографії виходять різними. Виправляється дана особливість додаванням до стилів блоку властивості width з фіксованим значенням.