| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Розмістити фотографію по правому краю вікна браузера, щоб довколишній текст обтекал її з інших сторін.
Рішення
За замовчуванням зображення на сторінці розташовується по лівому краю вікна браузера, а довколишній текст вирівнюється по нижній кромці зображення. Щоб задати вирівнювання по правому краю для селектора IMG слід встановити стильове властивість float зі значенням right.
Не всі малюнки на сторінці слід вирівнювати зазначеним чином, тому краще ввести спеціальний клас, назвемо його rightpic, і будемо додавати його тільки до потрібних зображень. Також навколо малюнка бажано додати відступи через властивість margin, щоб між текстом і зображенням з'явилося порожній простір (приклад 1).
Приклад 1. Зображення праворуч
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8">
<title>Вирівнювання фотографії</title>
<style>
.rightpic {
float: right; /* Вирівнювання по правому краю */
margin: 0 0 5px 5px; /* Відступи навколо фотографії */
}
</style>
</head>
<body>
<p><img src="images/photo.jpg" alt="Ілюстрація" class="rightpic">
На відміну від класичної легенди, що прикрашено розповідає про реальну історичну подію, яка сталася порівняно давно, міська легенда розповідає про нещодавну подію чи факт, реальність яких недостовірна. Хоча вона може виникнути внаслідок випадку, що відбувся насправді, метою міської легенди є не повідомити правду, а збентежити, викликати сміх, страх, відразу. Тому в такій історії реальні елементи перебільшені, часто вводяться фантастичні елементи, такі як магія, потойбічні істоти, чудовиська. Міська легенда завжди має стосунок до поширеної моральної цінності, страху або сподівання. </p>
<p>Тоді як легенда, казка, пісня часто поширена серед порівняно обмеженої територіально спільноти (жителі села, міста, представники етносу тощо), міська легенда не прив'язана до конкретного місця. Її загальний сюжет доповнюється подробицями, загальновідомими в кожній конкретній спільноті.
</p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Фотографія, вирівняний по правому краю
Властивість float не лише вирівнює елемент по правому або лівому краю, але одночасно встановлює навколо елемента обтікання. При цьому інші об'єкти, наприклад текст, щільно до нього прилягають. Це легко уникнути, якщо скористатися універсальним властивістю margin, яке одночасно задає відступ зверху, справа, знизу і зліва від зображення.