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


или подробно о процессе обтекания HTML картинок и текстов

Глава содержит примеры обтекания текста картинкой из области Гипертекстовой разметки.

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

Они позволят вам создать свой сайт с чистого листа, а пока смотрим немного ниже.

В данной главе мы рассмотрим

  1. Восход и развитие интернет сети: новые формы общения, обучения, торговли и развлечений
  2. HTML обтекание картинки текстом: теория и практика
  3. Рассмотрим способы горизонтального обтекания HTML текста
  4. Пример HTML обтекания текста картинкой справа

Прежде, чем приступить к HTML обтеканию, предлагаю ознакомиться с информацией.

Это может быть интересно.

Восход и развитие сети интернет

Интернет непрерывно расширяется.


становится глобальной сетью за счет того, что к нему постоянно присоединяются отдельные частные лица и крупные коммерческие структуры, локальные и региональные компьютерные сети со всего Мира. В 1993 году была разработана технология Word Wide Web, которая превратилась в одну из самых важных служб в рамках Всемирной паутины. Данная структура спровоцировала рост популярности технологии интернет, вызвала небывалый интерес со стороны будущих веб-дизайнеров и разработчиков, со стороны миллионов людей, которые впоследствии занялись созданием сайтов для своего собственного удовольствия и на благо общества. Интернет стал неотъемлемой частью современной цивилизации. Проникая в сферу образования, торговли, связи, услуг, Глобальная сеть создает новые формы общения, способы обучения, торговли и развлечений. Интернет-поколение является настоящим социокультурным феноменом наших дней и это поколение не может представить себе жизнь без Всемирной сети.

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

Пример:

<title>Пример ХТМЛ обтекания картинок текстом</title>
</head>
<body>
<p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху картинки</p>
<p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по середине</p>
<p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст снизу картинки</p>
</body>

Результат:

sposob obtekanija teksta kartinkoj

Посмотреть в новом окне: HTML картинка с обтеканием

Атрибуты и значения


  • align="top" – выравнивает картинку и текст по верху.
  • align="middle" – выравнивает картинку и текст по центру, по вертикали.
  • align="bottom" – выравнивает картинку и текст по низу.

Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самой картинки.

Способы горизонтального обтекания HTML текста

Пример:


<title>HTML текст обтекает картинку справа</title>
</head>
<body>
<img src="../images/2121.png" align="left" width="128" height="128" />
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
</body>

Результат:

obtekanie

Посмотреть в новом окне: HTML картинка и текст

Пример HTML обтекания текста картинкой справа

Пример:

<title>HTML картинка справа – текст слева</title>
</head>
<body>
<img src="../images/2121.png" align="right" width="128" height="128" />
<p>Изображение обтекает текст справа</p>
<p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p>
</body>

Результат:

obtekanie kartinki

Посмотреть в новом окне: Обтекание HTML текста и картинки справа

1 3 4 5 6 7 8 9 10 11 12

Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML изображение Обтекание картинки текстом html css   HTML обтекание текста и картинки

ab-w.net

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

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

Используем свойство float. В качестве параметра указываем по какой стороне выравниваем изображение. С margin, надеюсь, понятно — чтобы текст не вплотную прилегал к обтекаемому изображению.

Код HTML, CSS

<!DOCTYPE html>  <html>   <head>    <meta charset="utf-8">  &nbs.  

loat: right; /* Выравнивание по правому краю  */      margin: 10px 0 10px 10px; /* Отступы вокруг картинки */    }   </style>  </head>  <body>   <h2>Сталинградская битва</h2>   <p><img src="images/1.jpg" alt="Сталинградская битва" width="120" class="leftimg">      Является крупнейшей сухопутной битвой в ходе Второй мировой войны, которая наряду со сражением на Курской дуге стала переломным моментом в ходе военных действий, после которых немецкие&n.

nbsp;которого 6-я армия и другие силы союзников нацистской Германии внутри и около города были окружены и частью уничтожены, а частью захвачены в плен.</p>       <p>По приблизительным подсчётам, суммарные потери обеих сторон в этом сражении превышают два миллиона человек. Державы Оси потеряли большое количество людей и вооружения и впоследствии не смогли полностью оправиться от поражения.</p>      <h2>Курская битва</h2>   <p><img src="images/2.jpg"  width="120" alt="Курская битва" class="rightimg">.

;кампании 1943 года. Битва продолжалась 49 дней. Немецкая сторона наступательную часть сражения называла операция <i>Цитадель</i>.</p> <p>В результате наступления по плану <i>Кутузов</i> была разгромлена орловская группировка немецких войск и ликвидирован занимаемый ею орловский стратегический плацдарм. В ходе операции <i>Полководец Румянцев</i> прекратила своё существование белгородско-харьковская группировка немцев и был ликвидирован этот важнейший плацдарм.[9] Коренной перелом в ходе Великой Отечественной войны, начатый под Сталинградом, был завершен в ходе Курской битвы и сражения за Днепр.</p>  </body> </html>

Главным тут является использование свойства float (выравнивание). В примере с первым изображение по левому краю, со вторым — по правому.

Демонстрация Скачать исходники

tradebenefit.ru

Теги html: обтекание картинки текстом


Картинки располагают на странице тремя способами:

  • центральное положение;
  • обтекание текстом;
  • вставка в поле.

При большом размере картинку располагают посередине страницы, сначала поместив в контейнер < p > тега img, после чего для него устанавливают атрибут align=»center». Если часто используют изображение, следует применять стиль CSS к тегу < p >.

Когда изображение небольшое, рядом располагают текст. Способ является наиболее распространенным. Обтекание текстом делают несколькими способами. Но сначала картинку нужно вывести на экран. Если к ней известен путь, например, «foto1.jpg», ее вставляют на html страницу с помощью следующей записи:

< p>< img src =» foto1.jpg «>< /p>

Пример соответствует случаю, когда файлы html и рисунка находятся в одной папке.

Если за изображением следует текст, он будет располагаться ниже. Это не всегда удобно, поскольку по бокам будут оставаться пустые места, Поэтому страницу оформляют так, чтобы создать обтекание картинки текстом html. Для этого у тега img существует атрибут align, задающий расположение фото или рисунка относительно текста. От этого параметра зависит, с какого края страницы располагается графический материал и каким образом его обтекает текст. Обтекание картинки текстом html css«>Атрибуту можно задавать следующие значения:


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

У тега img есть параметры, которыми можно задавать расстояние от текста до картинки (hspace и vspace). Без их применения текст будет располагаться к картинке вплотную. Кроме того, выбираются габаритные размеры рисунка width и height. При этом должна соблюдаться пропорция между шириной и высотой. Если габариты не задавать, по умолчанию рисунок переносится с размерами исходника, что не всегда удобно.

Перемещение изображения к левому краю с его обтеканием текстом можно сделать с помощью записи:

< p>< img src =» foto1.jpg » align=»left» width=150 height=100 hspace=5 vspace=5>Текст< /p>

Применение таблиц


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

< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= «foto2.jpg» width=150 height=100>

< /table >

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

Использование стилей

Из предыдущих примеров видно, как просто сделать обтекание картинки текстом html. CSS позволяет достигнуть аналогичных результатов. Обтекание создают с помощью свойства float. Здесь также выравнивание обеспечивается значениями left и right.Обтекание картинки текстом html css«>

Для этого создается класс и ему присваиваются стили CSS:

< style >

.fotoleft{

float:left;

margin: 5px 12px 3px 0px;

}

< /style >

Затем стилевое свойство float добавляется к селектору img:

< img src= «foto1.jpg» class=»fotoleft» >

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

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

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

Обтекание картинки текстом html css«>

Обтекание изображений округлой формы текстом html

Веб-страницы состоят преимущественно из прямоугольных областей. Всем известно, как сделать обтекание картинки текстом в html. Стили применяют для создания геометрических фигур, но они не связаны с укладкой контента внутри или снаружи элементов. Можно рисунок разделить на 2 части и разместить с обеих сторон блоки отступов разной ширины. За ними сразу располагается текст.

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

Обтекание текстом сложных фигур

Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.

Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.Обтекание картинки текстом html css«>

Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:

#circle

{

shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */

float:left;

}

< p>Пример текста< /p>

Код создает круг, идеально обтекаемый текстом.

Аналогично будет создаваться любая неправильная форма, благодаря поддержке Photoshop, который позволит получить CSS код фигуры.

Заключение

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

www.syl.ru

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

С помощью свойства 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

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

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

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

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

 

 

 

 

 

 

 

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

  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 css

 

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

 

 

Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно 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). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»

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

 

 

 

 

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

 

 

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

www.webadvisor.ru

Общее решение задачи

CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.

Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.

Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?

Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.

Для начала присвоим нашему изображению класс:

  <img src="моя_картинка.jpg" width="100" height="100" class="img_class" />  

Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:

  .img_class {  float: left;  margin: 10px 10px 10px 0;  }  

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

Массовое применение для всех изображений

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

Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.

В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:

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

Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):

  #my_img {  float: right;  margin: 10px 0 10px 10px;  }  

Накладываем текст на изображение

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

Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.

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

  <div class="my_block">Текст, который будет наложен на картинку</div>  
  .my_block {  background: url (my_img.jpg) top left no-repeat;   width: 500px;  height: 300px;  padding: 400px 0 0 0;   }  

В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.

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

Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):

  <div class="img">  <img src="моя_картинка.jpg" width="500" height="300" />  <div class="text">Текст, который будет наложен на картинку</div>  </div>  
  .img {   width:500px;   height: 300px;  position: relative;  }  .text {  background-color: #FFF;   width: 500px;   height: 50px;   position: absolute;   left: 0px;   top: 450px;  }  

В приведенном примере мы разместили один блок внутри другого с помощью свойства position — блок с текстом будет иметь белый фон и располагаться в нижней части изображения.

Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!

www.runcms.org

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

Свойство 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

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


You May Also Like

About the Author: admind

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

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

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