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

В документах Microsoft Word довольно часто встречаются различные изображения. Уверенна, и Вам время от времени приходится разбавлять написанное, вставляя по смыслу картинки, ведь так информация, воспринимается намного лучше.

На сайте есть различные статьи, которые помогут разобраться, как правильно работать с изображением, вставленным в Ворд. Добавленный рисунок можно обрезать, или повернуть изображение в Word на необходимый угол. Если наткнулись на нужную или просто красивую картинку в документе, то можете сохранить изображение на компьютер.

После того, как Вы добавили рисунок в документ, он вставляется в текст, и написать что-либо Вы можете только вверху или внизу. Но что сделать, чтобы напечатать слова получилось рядом с картинкой или по ее контуру?

Вот с этим мы и разберемся в данной статье. В Ворде текст может обтекать рисунок не только с боку. Он может быть помещен за ним, по контуру или вокруг рамки. У меня установлен MS Word 2010, но сделанные скриншоты подойдут и тем, у кого установлен 2007, 2013 или 2016, разве что немного названия пунктов могут отличаться.

Добавьте рисунок в документ и кликните по нему два раза, чтобы открылась вкладка «Работа с рисунками» – «Формат». Затем в группе «Упорядочить» нажмите на кнопку «Обтекание текстом». В открывшемся контекстном меню выберите подходящий вариант.

Нужное меню можно открыть и другим способом. Кликните правой кнопкой мышки по изображению и выберите пункт «Обтекание текстом». После этого снова откроются возможные варианты.

Давайте рассмотрим подробнее все доступные виды обтекания.

«Вокруг рамки» – размещение написанного вокруг рамки объекта. Рамка появляется, если кликнуть по картинке мышкой – это прямоугольник с маркерами по контуру. То есть, если фото неправильной формы, напечатан текст будет все равно по прямоугольнику.

«По контуру» – такое обтекание лучше использовать для объектов произвольной формы, чтобы слова разместились по контуру, а не по рамке.

«Сквозное» – обтекание будет по рамке. Лучше использовать, когда объект не полностью залит, а в нем есть пустые области какой-нибудь формы.

«Сверху и снизу» – даже если изображение небольшого размера, написано справа или слева от него ничего не будет.

«За текстом» – объект будет помещен за напечатанный текст. Обратите внимание, пока изображение выделено – по контуру рамка с маркерами, можно его перемещать и редактировать. Но как только перейдете к редактированию или набору слов, то выделить рисунок больше не получится, если только его границы не выходят за рамки написанного, то есть на поля справа или слева.

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

«Перед текстом» – картинка будет помещена на сам текст и закроет его.

«Изменить контур обтекания» – данный пункт можно выбрать, если картинка неправильной формы, или Вы хотите, чтобы слова на ней были написаны частично. В этом случае, вокруг изображения появится контур красного цвета с черными маркерами. Перемещайте маркеры, чтобы изменить контур. Добавлять новый маркеры можно, просто кликнув в нужном месте по красной линии и переместив курсор мышки в другое место.

Чаще всего приходится печатать что-то именно возле картинки, с правой или с левой стороны. Из всех описанных способов для этого подходит обтекание «Вокруг рамки». Выберите его для изображения, затем переместите объект в нужную часть документа, так, чтобы текст располагался с правой, как в примере, или с левой стороны.

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

Для этого кликните по изображению правой кнопкой мышки и выберите из контекстного меню «Обтекание текстом» – «Дополнительные параметры разметки».

Откроется отдельное окно «Разметка». В разделе «Расстояние от текста» укажите нужные значения в тех полях, с каких сторон текст находится от изображения. Потом нажмите «ОК».

Например, я увеличила данное расстояние.

Поэкспериментируйте, посмотрите, как будет выглядеть текст справа от изображения, по его контуру и прочее. Выбирайте такое расположение картинки и текста в документе, которое подойдет больше всего.

comp-profi.com

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

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

<h1>List of towns in England</h1>  <h2>Amersham</h2>  <p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p>    <h2>Buxton</h2>  <p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...</p>    <h2>Chesterfield</h2>  <p class="columns">Chesterfield is ...</p>  <img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg">  <p class="columns">It has ...</p>    <h2>Dartmouth</h2>  <p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>

CSS стили

body {   margin: 0;   background: #FFF8E8;   padding: 0 20px;   font-size: 90%;   counter-reset: h2; /*создаем счетчик для любого заголовка h2*/  }  h1 {   font-family: 'Lora', serif;   color: #564C4A;   font-weight: 300;  }  h2 {   font-family: 'Lora', serif;   color: #B00D22;   font-weight: 300;   clear: both; /* отменяем обтекание с обеих сторон */    padding: 1em 0 0.25em;   border-bottom: 2px solid;   counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */  }  h2:before {   content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */  }  p {   font-family: arial;   color: #785F5B;   line-height: 1.3;  }    /********** картинка слева **********/  .left {   float: left;   margin: 0 1em 1em 0;  }    /********** картинка справа **********/  .right {   float: right;   margin: 0 0 1em 1em;  }    /********** картинка между текста **********/  .columns {   float: left;   max-width: 30%;   margin: 0;  }  .img-center {   float: left;   margin: 0 1.5% 0 1.5%;   max-width: 37%;  }  /********** картинка по центру********* */  .center {   display: block;   margin: 0 auto 1.5%;  }

Обтекание картинки с двух сторон

Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов :before и :before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.

Разметка HTML

<div class="wrap">   <img src="cat.jpg">   <div class="left">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>   <div class="right">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>  </div>

CSS стили

.wrap {   width: 60%;   margin: 80px auto;   position: relative;  }  img {   position: absolute;   top: 0;   left: 50%;   margin-left: -125px;  }  .left {   float: left;   width: 49%;  }  .right {   float: right;   width: 49%;  }  .left:before, .right:before {   content: "";   width: 125px;   height: 250px;  }  .left:before {   float: right;  }  .right:before {   float: left;  }

html5book.ru

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

Если, разработчик шаблона для вордпресс поленился довести до ума своё детище, то при вставке изображения в тело поста оно будет выглядеть следующим образом:

Конечно, это смотрится не очень красиво. Поэтому, нам нужно сделать обтекание картинки текстом.

Для этого, откройте папку с Вашей активной темой оформления, найдите файл — «style.css» и в самом конце добавьте кусок нового кода:

  .alignnone { margin: 5px 20px 20px 0; }  .aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; }  .alignright { float:right; margin: 5px 0 20px 20px; }  .alignleft { float:left; margin: 5px 20px 20px 0; }  .aligncenter { display: block; margin: 5px auto 5px auto; }  a img.alignright { float:right; margin: 5px 0 20px 20px; }  a img.alignnone { margin: 5px 20px 20px 0; }  a img.alignleft { float:left; margin: 5px 20px 20px 0; }  a img.aligncenter { display: block; margin-left: auto; margin-right: auto }  .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }  .wp-caption.alignnone { margin: 5px 20px 20px 0; }  .wp-caption.alignleft { margin: 5px 20px 20px 0; }  .wp-caption.alignright { margin: 5px 0 20px 20px; }  .wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } 

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

Таким образом, мы исправили косяк разработчика шаблона.

Но это ещё не всё.

sozdaiblog.ru

Обтекание картинки текстом при помощи 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. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:

Пример:

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

Пример:

4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.

Пример:

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

Пример:

Обтекание картинки текстом при помощи свойств CSS 

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

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

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

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

Теперь классу leftfoto нужно присвоить определенные CSS стили.  

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

Разберем те элементы, которые мы здесь задали:

• float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
• margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.

Пример:

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

Здесь мы добавили следующие элементы:

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

Пример:

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

webmastermix.ru

Во время работы в MS Word нередко можно столкнуться с необходимостью проиллюстрировать документ с помощью изображений. О том, как просто добавить картинку мы уже писали, как писали и о том, как наложить поверх нее текст. Однако, иногда может потребоваться сделать обтекание добавленной картинки текстом, что немного сложнее, зато и выглядит куда приятнее. Об этом мы и расскажем в этой статье.

Урок: Как в Ворде наложить текст на картинку

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

1. Если в вашем текстовом документе еще нет изображения, вставьте его, воспользовавшись нашей инструкцией.

Урок: Как вставить картинку в Word

2. Если это необходимо, измените размеры изображения, потянув за маркер или маркеры, расположенные по контуру. Также, вы можете обрезать изображение, изменить размеры и контур области, в которой оно находится. Наш урок вам в этом поможет.

Урок: Как обрезать картинку в Ворде

3. Кликните по добавленному изображению, чтобы на панели управления отобразилась вкладка “Формат”, расположенная в основном разделе “Работа с рисунками”.

4. Во вкладке “Формат” нажмите на кнопку “Обтекание текстом”, расположенную в группе “Упорядочить”.

5. Выберите в выпадающем меню подходящий вариант обтекания текстом:

• “В тексте” — изображение будет “покрыто” текстом по всей площади;

• “Вокруг рамки” (“Квадрат”) — текст будет расположен вокруг квадратной рамки, в которой находится изображение;

• “Сверху или снизу” — текст будет располагаться сверху и/или снизу изображения, область по бокам при этом останется пустой;

• “По контуру” — текст будет расположен вокруг изображения. Данный вариант особенно хорош в случае, если изображение имеет круглую или неправильную форму;

• “Сквозное” — текст будет обтекать добавленное изображение по всему периметру, в том числе и изнутри;

• “За текстом” — рисунок будет располагаться за текстом. Таким образом можно добавить в текстовый документ водяной знак, отличный от стандартных подложек, доступных в MS Word;

Урок: Как добавить подложку в Ворде

Примечание: Если для обтекания текстом будет выбран параметр “За текстом”, после перемещения изображения в нужное место, вы больше не сможете его редактировать, если область, в которой изображение находится, не выступает за пределы текста.

• “Перед текстом” — изображение будет расположено поверх текста. В таком случае может возникнуть необходимость изменить цвет и прозрачность рисунка, чтобы текст оставался видимым и хорошо читабельным.

Примечание: Названия, обозначающие разные стили обтекания текстом, в разных версиях Microsoft Word могут отличаться, а вот типы обтекания всегда одинаковы. Непосредственно в нашем примере используется Ворд 2016.

6. Если текст еще не был добавлен в документ, введите его. Если же в документе уже содержится текст, обтекание которым необходимо сделать, переместите изображение на текст и отрегулируйте его положение.

Совет: Экспериментируйте с различными типами обтекания текстом, так как вариант, идеально подходящий в одном случае, может оказаться совершенно неприемлемым в ином.

Урок: Как в Word наложить картинку на картинку

Как видите, сделать обтекание изображения текстом в Ворде совсем несложно. Кроме того, программа от Microsoft не ограничивает вас в действиях и предлагает несколько вариантов на выбор, каждый из которых может быть использован в различных ситуациях.

lumpics.ru

Настроить подобное обтекание можно во многих текстовых редакторах и Microsoft Word. Сейчас я вам подробнее расскажу, как это сделать.

Для начала вам нужно поместить изображение на ваш лист в Word. Как вставить рисунок на страницу в Microsoft Word мы рассматривали в предыдущем уроке.

Затем вы выделяете изображение и во вкладке «Формат» находим опцию «Обтекание текстом»

Жмем на «Обтекание текстом» и выбираем необходимую вам опцию из выезжающего списка.

Сейчас на примерах я пока как будет выглядеть текст и изображение при выборе той, или иной опции.

В тексте – стандартно заданное обтекание, которое включено по умолчанию при добавлении картинки.

Вокруг рамки – вокруг картинки автоматически выставляется невидимая рамка и куда бы вы не перенесли изображение — текст всегда будет окружать его (кроме краев листа).

По контуру – практически тоже самое, что и «Вокруг рамки». Единственное, что я заметил – текст стал более «правильно» выравниваться вокруг картинки.

За текстом – изображение помещается на задний план, а поверх него налаживается текст.

Перед текстом– противоположная опции «За текстом», картинка становится впереди текста и закрывает его (размер закрытой части зависит от параметров картинки).

Сверху и снизу – обтекание картинки текстом происходит только сверху и снизу, по бокам остается свободное место.

Сквозное – текст обтекает изображение со всех сторон (еще я эту опцию называю «Полное обтекание»).

Дополнительные параметры разметки – при нажатии откроется диалоговое окно, в котором есть все вышеперечисленные опции, а также в неё присутствует возможность изменить размеры рамки изображения вокруг которой и происходит обтекание текста.

На этом все, учитесь, практикуйте, экспериментируйте.

В этом уроке вы научились делать обтекание текста вокруг картинки в текстовом редакторе Microsoft Word 2007.

vgtk.ru

Пример применения

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

Размещения в тексте изображений в данном случае можно использовать для улучшения восприятия документа читающим его человеком. Наличие визуального образа товара или логотипа фирмы, размещенные вместе с его описанием, сделают такой текст более удобным для ознакомления. В этом случае вам и может понадобится применить функцию «обтекание текста» в «Ворде».

Альтернатива HTML

Разумеется, печатание листовок, приведенное в качестве примера, далеко не единственная возможность применения такого полезного инструмента, как «обтекание текста». В «Ворде» существует возможность сохранения или создания документа в виде веб-страницы.

Конечно, существует множество гораздо более продвинутых инструментов для создания сайтов, чем текстовый редактор. Но вполне можно набросать примерный эскиз своего сайта и затем уже доверить его разработку профессионалам. По крайней мере, такой вариант позволит вам сэкономить свое и чужое время, которое вы потратите на словесное описание пожеланий веб-дизайнерам.

Последовательность действий

Рассмотрим, как сделать обтекание текста в «Ворде». Для выполнения этой операции, войдем в уже знакомое нам меню «Вставка» и выберем элемент «Рисунок». После размещения в документе необходимого изображения правой кнопкой вызовем выпадающее меню и выберем там пункт «Перенос текста». Поэкспериментировав с параметрами, можно подобрать наиболее подходящий вариант.

Изменить расположение изображения на странице возможно не только через контекстное меню. Выделив в тексте рисунок и перейдя во вкладку «Макет», можно обнаружить целую панель управления, предназначенную для редактирования его размещения. Доступные здесь средства позволяют выбрать расположение заданной картинки в определенной области создаваемого документа и использовать различные варианты инструмента «обтекание текста». В «Ворде», таким образом, можно комбинировать различные схемы для достижения лучшего эффекта.

Еще одним полезным свойством Word является возможность применения к картинке нестандартных вариантов ее взаимодействия с окружающим текстом. Выбрав в меню «Перенос текста» вариант «Изменить границу обтекания», вы можете редактировать имеющее стандартную прямоугольную форму поле рисунка в широком диапазоне. В зависимости от того, что изображено на рисунке, можно «заставить» текст выстроиться возле него по диагонали или под разными углами вдоль боковой стороны.

В заключение

Сегодня мы рассказали, как пользоваться инструментарием «обтекание текста» в «Ворде». Проведя несколько экспериментов, вы сможете подобрать наиболее подходящие параметры его применения и легко создавать компактные и насыщенные полезной информацией документы.

fb.ru

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Обтекание</title>  <style>  .leftimg {  float:left; /* Выравнивание по левому краю */  margin: 7px 7px 7px 0; /* Отступы вокруг картинки */  }  .rightimg {  float: right; /* Выравнивание по правому краю */   margin: 7px 0 7px 7px; /* Отступы вокруг картинки */  }  </style>  </head>  <body>  <h2>Доклад лейтенанта Бокатуева</h2>  <p><img src="images/1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">  Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного   противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной   контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава   потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился   в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы   своего взвода. В результате операции были захвачены элементы внеземной культуры, которые   переданы аналитической группе.</p>  <h2>Пресс-релиз аналитической группы</h2>  <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">  В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось  психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших   над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии   аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в   состоянии аффекта.</p>  </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

htmlbook.ru