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



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

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

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

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

 

 

 

 

 

 

 

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

  1. Обтекание картинки текстом средствами HTML;
  2. Обтекание картинки текстом средствами CSS;
  3. Обтекание картинки текстом средствами редактора Joomla.

 

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

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


Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху — 5px, справа — 10px, снизу — 5px, слева — 0px.

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

 

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

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «>Картинка</div>


 

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

<img src=»/images/joomla/adminka_20.png» border=»0″/>

 

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

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

 

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

<div style=»float:left; margin: 5px 10px 5px 0px «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

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

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

 

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

 

 

Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно html-код будет несколько другим:

<div style=»float:right; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 10px;»> После картинки вставляем код: </div>.


Можете поэкспериментировать с кодами. Главное добиться желаемого результата. И еще совет, обязательно просматривайте результаты ваших экспериментов хотя бы в основных браузерах: Internet Explorer, Mozilla Firefox, Opera. Если все выглядит как вы планировали, значит, вы со своей задачей справились.

Однако, хотелось бы заметить, что применение внутренних стилей скорее должно быть исключением, чем правилом. Для того чтобы не засорять html-код лишними тегами, тем самым увеличивая время загрузки веб-страниц, лучше все-таки делать все по правилам. То есть, стили нужно прописывать в соответствующих файлах CSS.

 

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

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

  1. За вывод изображения на веб-страницу отвечает тег <img>.
  2. За выравнивание элемента по определенному краю, с обтеканием его остальными элементами отвечает свойство <float>.
  3. За область внешних отступов отвечает <margin>.
  4. Класс (.class) в CSS служит для придания элементам индивидуального стиля, отличного от основного стиля, прописанного в документе.

Сначала добавим класс стиля к изображению. Для этого, селектору img дадим имя .fotoleft. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашей картинки:


Img. fotoleft {
float: left;
margin: 12px 12px 12px 0;
}

Теперь применим класс class=»fotoleft» к тегу <img> в файле HTML. Открываем статью в исходном коде и прописываем класс для картинки:

<img src=»/картинка.png» width=»150″ height=»110″ class=»fotoleft» />

Таким образом, мы выровняли картинку по левому краю с обтеканием текста по его правой стороне и задали величину отступов: сверху — 12px, справа — 12px, снизу — 12px, слева — 0px. Теперь, чтобы таким же образом выровнять любую другую картинку, нужно всего лишь присвоить ей созданный нами класс стиля.

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

Перед вами откроется окно, в котором надо перейти на вкладку «Оформление». Здесь можно не только установить отступ, но и изменить размеры изображения.

Для того, чтобы текст обтекал картинку, установите в строке Стиль (Style) значение:
float: left; — если выравниваете картинку по левому краю (alignment: left);
float: right; — если выравниваете картинку по правому краю (alignment: right).

Для того, чтобы текст не слился с картинкой, задайте горизонтальные и вертикальные отступы — 10 (px). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»


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

 

 

 

 

 

 

 

 

 

 

 

Вы видите, что у нас появился отступ. Кстати, с помощью меню «Вставить/редактировать изображение» вы можете сделать подпись под изображением или чтобы подпись появлялась при наведении курсора на изображение и т.д. В этом, думаю, не сложно разобраться, поэкспериментировав с настройками.

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

 

 

 

 

 

 

 

 

 

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

www.webadvisor.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

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


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

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

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

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

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

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


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

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

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

В заключение


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

fb.ru

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

Для задания нужного обтекание картинки текстом в HTML нам достаточно в теге img указать атрибут align с присвоенным значение, который соответствует нужному способу обтекания. Атрибуту align можно задать следующие значения:

  • bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
  • top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
  • right –картинка выравнивается по правому краю, а контент обтекает ее по левому
  • left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
  • middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки

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

Вот пример использования атрибута align:

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

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

В этом случае для каждого изображения мы должны задать уникальный класс, а далее, в файле стилей, или между тегами <style>…</style> в самой странице, прописать этому классу свойство float с соответствующим способом обтекания. Для того, что бы добиться обтекания по правому или левому краю изображения, мы можем использовать значения left и right, так же, как и с атрибутом align.

HTML-код изображения:

CSS:

На мой взгляд, такой способ задания обтекания картинки текстом в CSS более удобен. Так как вы, при помощи CSS-свойств, можете более гибко настраивать параметры отображения картинки и изменять их. В примере я добавила дополнительно отступ с правой и левой стороны свойством margin, а так же добавила для изображения рамку. Картинка стала более выразительной и контент теперь не прилипает к ней.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

В документах 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%;  }

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

float-middle

Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов :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

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

В примере 1 введены два стилевых класса leftimg и rightimg, при добавлении их к <img> картинка выравнивается по соответствующей стороне, а текст при этом обтекает картинку.

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

<!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="image/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">  Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного   противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной   контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава   потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился   в бою взводный Кудряшёв&nbsp;М.А., грамотно использовавший человеческие ресурсы   своего взвода. В результате операции были захвачены элементы внеземной культуры, которые   переданы аналитической группе.</p>  <h2>Пресс-релиз аналитической группы</h2>  <p><img src="image/n2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">  В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось  психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших   над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии   аффекта, растащили прототип по деталям. Возможно, наши учёные до сих пор находятся в   состоянии аффекта.</p>  </body> </html>

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

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

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

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

webref.ru

Плавающие элементы

Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:

  • left — смещает элемент влево
  • right — смещает элемент вправо
  • none — отменяет плавание элемента

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

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

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

Описание плавающего элемента

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

Обтекание плавающего элемента

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

Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>  	 p { width: 250px; }   img { float: left; }   </style>   </head>   <body>   <p>   <img src="css.png" width="120" height="120">   С помощью CSS свойства float картинка была сделана плавающей с левой стороны.    Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку   по правой и нижней стороне.</p>   </body>  </html>  

Попробовать »

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

  img {    float: left;   margin: 0 10px 10px 0;  }  

Попробовать »

Отмена обтекания

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

Для CSS свойства clear можно установить одно из значений:

  • left — плавающие элементы запрещены с левой стороны.
  • right — плавающие элементы запрещены с правой стороны.
  • both — плавающие элементы запрещены с обеих сторон.
  • none — разрешает наличие плавающих элементов с обеих сторон.
  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>  	 div { width: 400px; }   img { float: right; }   p { clear: right; }   </style>   </head>   <body>   <div>   <img src="logocss.gif" width="95" height="84">   <p>С помощью свойства clear установлено, что плавающие элементы запрещены   с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку  	по левому краю.</p>   </div>   </body>  </html>  

Попробовать »

puzzleweb.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.