Як зробити обтікання картинки текстом в HTML і CSS

1. Обтікання картинки текстом за допомогою HTML
2. Обтікання картинки текстом за допомогою властивостей CSS

Як зробити обтікання картинки текстом в HTML і CSS - 4.4 out of 5 based on 19 votes

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

Обтікання картинки текстом за допомогою HTML

Найбільш простий, спосіб позиціонування картинки на сторінці це скористатися засобами HTML. Але у даного способу, в порівнянні з можливостями CSS є недолік, в ньому немає можливості встановити відступ між картинкою і текстом, а лише можна зробити так, щоб текст обтікав зображення.

Розглянемо все по порядку. Для вставки картинки в HTML сторінку використовується тег img, докладніше дивіться урок, як вставляти картинки в HTML: http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html . Тому, щоб вставити картинку в текст HTML сторінки, досить в коді прописати наступне:

- де foto.jpg - це відносний шлях до картинки. Можна задати і абсолютний шлях, тоді потрібно прописати URL виду: http://webmastermix.ru/foto.jpg

У тега img є атрибут align, який і визначає з якого краю буде розташована картинка і з якого краю її буде обтікати текст (наприклад align = "left" по лівому краю). Атрибут align має наступні значення:

• left - зображення буде розташовано по лівому краю, а текст буде обтікати його справа;
• right - зображення розташується справа, а текст буде обтікати його зліва;
• bottom - відповідає за вертикальне вирівнювання, при цьому картинка буде знаходиться зліва, а нижня частина зображення на проти першого рядка тексту, це значення задано за замовчуванням;
• top - теж, що і попереднє значення, тільки рядок тексту буде розташовуватися по верхній межі зображення;
• middle - при даному значенні відбувається вирівнювання середини зображення по базовій лінії рядка.

Тепер розглянемо кожен елемент на практиці.

1. Як я вже згадував, за замовчуванням зображенні задано значення bootom, т. Е. Не залежно від того, пропишемо ми його чи ні наша картинка по відношенню до тексту буде позиціонуватися так:

2. Щоб вирівняти зображення по лівому краю, а текст його обтікав справа потрібно прописати наступне:

<Img src = "foto.jpg" align = "left">

приклад:

3. Для вирівнювання зображення по правому краю потрібно відповідно прописати:

<Img src = "foto.jpg" align = "right">

приклад:

4. Тепер розглянемо вертикальне вирівнювання. Якщо застосувати значення top, то перший рядок тексту буде розташована на проти верхньої межі зображення.

<Img src = "foto.jpg" align = "top">

приклад:

5. Вирівнювання тексту по центру картинки. Даний прийом дуже добре застосовувати якщо вам потрібно невелику картинку розташувати по центру рядка.

<Img src = "foto.jpg" align = "middle">

приклад:

Обтікання картинки текстом за допомогою властивостей CSS

Як ви могли помітити на вищенаведених прикладах наша картинка і текст не зовсім красиво розташовуються по відношенню один до одного. Розташувати їх красиво на допоможуть CSS стилі, які можна додати до зображення задавши їй певний клас і застосувавши необхідні якості. Якщо ви не знаєте, що таке CSS дивіться урок Основи CSS і важливі поняття: http://webmastermix.ru/lessons-css/17-bases-css.html .

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

Розберемо простий приклад, як зробити обтікання картинки текстом, коли картинка розташована по лівому краю, а текст обтікає її справа. При цьому між текстом і картинкою задамо певні відступи.

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

<Img src = "foto.jpg" class = "leftfoto">

Тепер класу leftfoto потрібно присвоїти певні CSS стилі.

.leftfoto {float: left; margin: 4px 10px 2px 0px; }

Даний код розташовують між тегами <head> ... </ head>, уклавши в теги <style> ... </ style> або поміщають у зовнішній файл стилів CSS.

Розберемо ті елементи, які ми тут поставили:

• float: left; - ми позиціонували картинку по лівому краю і змусили обтікати текст навколо картинки праворуч, це по суті те ж саме, що і атрибут align = "left".
• margin: 4px 10px 2px 0px; - ми задали зовнішні відступи, 4px - від верху, 10px - справа, 2px знизу і 0px зліва від зображення.

приклад:

Додавши до даних стилям рамку і внутрішній відступ можна надати зображенню якийсь ефект фотографії з білими краями:

.leftfoto {float: left; margin: 4px 10px 2px 0px; border: 1px solid #CCC; padding: 6px; }

Тут ми додали наступні елементи:

• border: 1px solid #CCC; - задали суцільну лінію розміром 1 піксель і світло сірим кольором;
• padding: 6px; - задали внутрішній відступ між зображенням і рамкою, рівний 6 пикселям.

приклад:

Матеріал підготовлений проектом: WebMasterMix.ru

Пропонуємо Вам ознайомитися:

подробиці

Оновлено: 14 Грудень 2013

Створено: 14 Грудень 2013

Переглядів: 148 946