Статьи

Як зробити обтікання картинки текстом в 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

Новости

Как создать фото из видео
Кризис заставляет искать дополнительные источники дохода. Одним из таких источников может стать торговля на валютном рынке Форекс. Но чтобы не потерять свои деньги необходимо работать с надежным брокером.

Как оформить группу в вконтакте видео
Дано хотел свой магазин в вк, но не знал с чего начать его делать. Так как хотелось не банальный магазин с кучей ссылок и фото, а красиво оформленный. С меню, с аватаркой. После просмотра видео создал

Как оформить диск малыш от рождения до года из фото и видео
Оформить диск "Малыш от рождения до года" из фото и видео можно совершенно разными способами! Кто-то для достижения данной цели идет на шоу-таланты, кто-то пользуется услугами профессионалов, а кто-то