Елементи рівня блоку на веб-сторінці відображаються в послідовному порядку. Щоб покращити вигляд або корисність сторінки, можна змінити цей порядок, обернувши блоки, включаючи зображення, щоб текст обтікав зображення.
У термінах веб-дизайну цей ефект відомий як плаваюче зображення. Це досягається за допомогою властивості float CSS, яка дозволяє тексту обтікати вирівняне по лівому краю зображення з правого боку (або навколо вирівняного по правому краю зображення з лівого боку.
Почати з HTML
У цьому прикладі зображення додається до початку абзацу (перед текстом, але після відкриття теґу < p >). Ось початкова розмітка HTML:
< p > < img src = «» images/headshot-picture.jpg «» alt = «» Headshot photo «» > Текст абзацу знаходиться тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст може описати людину в голову. </Р >
За замовчуванням сторінка буде відображатися з зображенням над текстом, оскільки зображення є елементами рівня блоку в HTML. Це означає, що за замовчуванням переглядач відображає розриви рядків до і після елемента зображення. Щоб змінити цей вигляд за замовчуванням за допомогою CSS, додайте значення класу (ліворуч) до елемента зображення, щоб він служив як пастка, до якої можна прикріпити властивості.
< p > < img src = «» images/headshot-picture.jpg «» alt = «» Headshot photo «» class = «» left «» > Текст абзацу знаходиться тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст може описати людину в голову. </ P>
Зверніть увагу, що цей клас нічого не робить сам по себі. CSS досягне бажаного стилю.
Додавання стилів CSS
Додайте це правило до таблиці стилів сайту:
.left {
float: left;
відступи: 0 20px 20px 0;
}
Цей стиль плаває все, що завгодно з класом ліворуч від сторінки і додає невелике місце праворуч і внизу зображення, щоб текст не впирався в нього.
У переглядачі зображення тепер буде вирівняно по лівому краю; текст буде показано праворуч з пробілом між ними.
Використовуване тут значення класу .left є довільним. Ви можете називати це як завгодно, тому що це нічого не робить само по собі.
Інші способи досягнення цих стилів
Ви також можете зняти значення класу з зображення і стилізувати його за допомогою CSS, написавши більш конкретний селектор. У наведеному нижче прикладі зображення знаходиться всередині поділу зі значенням класу основного контенту.
< div class = «» main-content «» >
< p > < img src = «» images/headshot-picture.jpg «» alt = «» Headshot photo «» > Текст абзацу наведено тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст може описати людину в голову. </ P>
</ div>
Щоб стилізувати це зображення, напишіть цей CSS:
.main-content img {
float: left;
відступи: 0 20px 20px 0;
}
У цьому сценарії зображення вирівнюється по лівому краю, а текст плаває навколо нього, як і раніше, але без додаткового значення класу в розмітці. Масштабування може допомогти створити HTML-файл меншого розміру, який легше керувати і може підвищити продуктивність.
Уникайте вбудованих стилів
Нарешті, ви можете використовувати вбудовані стилі:
<p> <img src = ""images / headshot-picture.jpg"" alt = ""Headshot photo"" style = ""float: left; margin: 0 20px 20px 0;""> Тут текст абзацу. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст може описати людину в голову. </ P>
Однак це небажано, оскільки поєднує в собі стиль елемента і його структурну розмітку. Найкращі практики диктують, що стиль і структура сторінки залишаються окремими. Ця сегрегація особливо корисна, коли ви хочете змінити макет сторінки і шукати різні розміри екрану та пристрою на адаптивному веб-сайті.
Переплетення стилю сторінки з HTML значно ускладнює розробку медіазапросів для налаштування вашого сайту для різних екранів.
