Як зробити обтікання картинки текстом в html
Навігація по статті:
Обтікання картинки текстом в HTML
Для завдання потрібного обтікання картинки текстом в HTML нам досить в тезі img вказати атрибут align з присвоєним значення, який відповідає потрібному способу обтікання. Атрибуту align можна задати наступні значення:
- bottom - значення яке задається за замовчуванням. Перша стоку знаходиться у нижнього краю картинки. Картинка розташовується зліва
- top - в цьому випадку перша стоку знаходиться у верхнього краю картинки. Картинка розташовується зліва
- right -картінка вирівнюється по правому краю, а контент обтікає її по лівому
- left - зображення вирівнюється по лівому краю, а контент обтікає її з правого боку
- middle - в даному випадку відбувається вирівнювання середини зображення по базовій лінії рядка
Найбільш часто використовуються атрибути right і left. для правого і лівого обтікання. Дані варіанти найбільш звичні для сприйняття, і надають тексту із зображенням найбільш компактний вид.
Ось приклад використання атрибута align:
На мій погляд, такий спосіб завдання обтікання картинки текстом в CSS більш зручний. Так як ви, за допомогою CSS-властивостей, можете більш гнучко налаштовувати параметри відображення картинки і змінювати їх. У прикладі я додала додатково відступ з правого і лівого боку властивістю margin, а так же додала для зображення рамку. Картинка стала більш виразною і контент тепер не прилипає до неї.