Як плавати зображення ліворуч від тексту на веб-сторінці

Використовуйте каскадні таблиці стилів, щоб розмістити свої зображення з точністю

Елемент рівня блоку в документі HTML (наприклад, веб-сторінка) з'являється в послідовному порядку. Щоб змінити порядок, щоб зробити сторінку більш привабливою або підвищити її корисність, вам потрібно буде обернути блоки, включаючи зображення, щоб текст цієї сторінки протікав навколо неї.

У веб-плані цей ефект відомий як "плаваюче" зображення. Цей стиль досягається властивістю CSS для "float". Ця властивість дозволяє тексту обтікатися навколо вирівняного ліворуч зображення в його правий бік. Або навколо вирівняного праворуч зображення в лівій частині.

Почніть з HTML

Перше, що вам потрібно буде зробити, це мати деякі HTML для роботи. Для нашого прикладу ми напишемо абзац тексту та додамо зображення на початку абзацу (до тексту, але після відкриття

тег). Ось як виглядає ця розмітка HTML:

Текст абзацу йде тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст, ймовірно, стосуватиметься людини, якій призначений постріл у голову.


За замовчуванням наша веб-сторінка відображатиметься із зображенням над текстом, оскільки зображення є блоковими елементами в HTML. Це означає, що браузер відображає розриви рядків до і після елемента зображення за замовчуванням. Ми змінимо цей вигляд за замовчуванням, перейшовши на CSS. Спочатку, однак, ми додамо значення класу для нашого елемента зображення. Цей клас буде діяти як "гачок", який ми будемо використовувати в нашій CSS пізніше.

Текст абзацу йде тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст, ймовірно, стосуватиметься людини, якій призначений постріл у голову.


Зауважимо, що цей клас "лівих" взагалі нічого не робить. Щоб досягти бажаного стилю, нам потрібно використовувати CSS далі.

Стилі CSS

З нашим HTML-кодом (включаючи атрибут класу "зліва") ми можемо перейти до CSS. Ми додамо до нашої таблиці стилів правило, яке б плавало це зображення, а також додало б трохи підкладки поруч із ним, щоб текст, який в кінцевому підсумку обернеться навколо зображення, не надто стикався з ним. Ось CSS ви можете написати:

.ліво {
поплавок: зліва;
підкладка: 0 20px 20px 0;
}

Цей стиль плаває це зображення ліворуч і додає трохи накладки (використовуючи деякі скорочення CSS) праворуч і внизу зображення.

Якщо ви переглянули сторінку, що містить цей HTML у веб-переглядачі, зображення тепер буде вирівняно ліворуч, а текст абзацу з’явиться праворуч з відповідною кількістю проміжків між ними. Зверніть увагу на значення класу "left", яке ми використовували, є довільним. Ми могли б це назвати чим завгодно, оскільки термін "лівий" нічого не робить сам по собі. Який би термін ви не використовували, повинен бути атрибут класу в HTML, який працює з фактичним стилем CSS, який диктує візуальні зміни, які ви хочете внести.

Альтернативні способи досягнення цих стилів

Такий підхід надати елементу зображення атрибуту класу, а потім використовувати загальний стиль CSS, який плаває елементу, є лише одним із способів, яким ви могли б виконати цей вигляд "лівого вирівняного зображення". Ви також можете зняти значення класу із зображення та накреслити його за допомогою CSS, написавши більш конкретний селектор. Наприклад, давайте подивимось на приклад, коли це зображення знаходиться всередині поділу зі значенням класу "основний контент".


Текст абзацу йде тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст, ймовірно, стосуватиметься людини, якій призначений постріл у голову.



Щоб стилізувати це зображення, ви можете написати цей CSS:

.main-content img {
поплавок: зліва;
підкладка: 0 20px 20px 0;
}

У цьому випадку наш образ буде вирівнюватися зліва, при цьому текст плаває навколо нього, як і раніше, але нам не потрібно було додавати додаткове значення класу до нашої розмітки. Це в масштабі може допомогти створити менший HTML-файл, який буде простішим в управлінні, а також може покращити продуктивність.

Уникайте вбудованих стилів

Нарешті, ви навіть можете додати стилі безпосередньо у свою розмітку HTML, наприклад:

Текст абзацу йде тут. У цьому прикладі у нас є зображення фотографії в голову, тому цей текст, ймовірно, стосуватиметься людини, якій призначений постріл у голову.


Цей метод називається "стилі вбудованих". Це не доцільно, оскільки він поєднує стиль елемента з його структурною розміткою. Найкращі веб-практики диктують, що стиль та структура сторінки повинні залишатися окремими. Ця сегрегація особливо корисна, коли вашій сторінці потрібно змінити її макет і шукати різні розміри екрану та пристрої, що реагують на веб-сайт, що реагує на них.

Стиль сторінки, переплетений у HTML, значно ускладнить авторські медіа-запити, які будуть коригувати зовнішній вигляд вашого веб-сайту відповідно до необхідних для цих різних екранів.