Обтекание картинки текстом

rss

Как сделать обтекание картинки текстом

В предыдущей статье мы рассматривали вопрос, как вставить картинку в текст, теперь будем учиться делать обтекание картинки текстом.

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:
  1. Обтекание картинки текстом средствами HTML;
  2. Обтекание картинки текстом средствами CSS;
  3. Обтекание картинки текстом средствами редактора Joomla.

Обтекание картинки текстом в HTML

Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать

отступы: сверху - 5px, справа - 10px, снизу - 5px, слева - 0px.

  1. Для выделения фрагмента (блока) в документе в  HTML служит элемент <div>
<div>…</div>
  • Для определения стиля элемента служит универсальный атрибут <style> <div style=…>…</div>
  • Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон
  • Свойство <margin> отвечает за область внешних отступов:

    <margin-bottom> устанавливает размер отступа от нижней границы элемента;

    <margin-left> размер отступа от левой границы элемента;

    <margin-right> размер отступа от правой границы элемента;

    <margin-top> размер отступа от верхней границы элемента.

  • Зададим фрагменту документа с картинкой стиль, используя вышеописанные свойства:

    <div>Картинка</div>

    Код нашей картинки в HTML выглядит так:

    <img src="http://www.webadvisor.ru/images/joomla/adminka_20.png" border="0"/>

    Вставим в div нашу картинку, в результате получилось:

    <div> <img src="http://www.webadvisor.ru/images/joomla/adminka_20.png" border="0"/> </div>

    Сократим запись:

    <div><img src="http://www.webadvisor.ru/images/joomla/adminka_20.png" border="0"/></div>

    На картинке ниже вы видите данный код в HTML документе.

    Источник: www.webadvisor.ru

    Категория: Онлайн-шоппинг

    Похожие статьи: