Статьи

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

Новости

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

Финансовые новости мира
Вернуться в раздел Профессия экономист Экономисты востребованы в компаниях, где требуется контролировать расходы, правильно рассчитывать средства, где необходим постоянный анализ экономической деятельности

Транспортное средство закон
Пункт 1.5. ПДД гласит: «Участники дорожного движения должны действовать таким образом, чтобы не создавать опасности для движения и не причинять вреда», а в пункте 1.2. указано: «Участник дорожного движения»

Квест кімната дніпро
Законопроект о запрете посещения квестов детьми младше 14 лет прокомментировал один из самых популярных в России квест-агрегаторов. Поправки в городской закон о мерах по предупреждению причинения вреда

Труба в изоляции Valsir Pexal
На сегодняшний день имеется масса самых разных отделочных материалов, которые можно использовать, как внутри, так и снаружи помещения в качестве декоративного элемента, однако большинство из них имеет

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

Роллы
От того, как и чем мы питаемся зависит очень многое. Это и самочувствие и внешность и общее состояние здоровья. Несмотря на широкое предложение, вопросы правильного и вкусного питания стоят очень остро.

Как создать видео без программ
Реклама - это один из видов деятельности, который помогает людям продвигать свои товары или услуги. Одним из таких видов рекламы является - раздача листовок или более современное название "флаеров". Раздача

Дешевая доставка суши
Суши можно не только запивать, но и заедать: хорошо с суши сочетаются тэмпура (обжаренные в специальном кляре ломтики овощей, грибы или морепродукты), а также мисо-суп (суп, заправленный бобовой пастой).

Европейская рулетка
Кажущаяся простота игры в рулетку (крупье запускает шарик, игроки ставят ставки) на деле подчиняется определенным правилам. Для каждой ставки в рулетке, будь то внутренние ставки или внешние ставки, важно