Html текст справа от картинки


Особенности взаимодействия HTML изображения и текста

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

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.

Навигация по странице

  1. Текст вверху, внизу, по центру изображения на HTML странице сайта
  2. HTML изображение слева – текст справа
  3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения

Пример:

<html>
<head>
<title>HTML текст вверху, внизу, по центру изображения</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>
</html>

Результат:

HTML текст. Текст вверху, внизу, по центру изображения

Посмотреть в новом окне: HTML текст вверху, РІРЅРёР·Сѓ, РїРѕ центру изображения

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

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

Напомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

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


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

HTML изображение слева – текст справа

Пример:

<html>
<head>
<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>
</html>

Результат:

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

HTML изображение справа – текст слева

Пример:


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

Результат:

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

ab-w.net

Начинаем с HTML

Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега <p>). Вот как выглядит HTML-разметка:

По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:

Стили CSS

Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.


Вот CSS-код:

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

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

Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.

Альтернативные способы

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:

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

Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.


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

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Перевод статьи «How To Float an Image to the Left of Text on a Webpage» дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

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

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


Для обтекания картинки текстом применяется стилевое свойство float. Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float, обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.

Пример 1. Применение float

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Изображения</title>   <style>   figcaption {   text-align: center;   }   .left {   float: left; /* Выравнивание по левому краю */   margin: 0 1em 1em 0; /* Отступ справа и снизу */   }   .right{   float: right; /* Выравнивание по правому краю */   margin: 0 0 1em 1em; /* Отступ снизу и слева */   }   </style>   </head>   <body>   <figure class="left">   <img src="image/fig.jpg" width="200" alt="">   <figcaption>Подпись снизу</figcaption>   </figure>   <p>Текст</p>   </body>  </html>

В данном примере вводится два класса с именами left и right, добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin. На рис. 1 показано выравнивание по левому краю.


Выравнивание фотографии по левому краю

Рис. 1. Выравнивание фотографии по левому краю

Выравнивание рисунка относительно текста

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

Базовая линия

Рис. 2. Базовая линия

Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).

Картинка, выровненная по базовой линии текста

Рис. 3. Картинка, выровненная по базовой линии текста

В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle.

Пример 2. Выравнивание картинки относительно текста

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> p img { vertical-align: middle; } </style> </head> <body> <p>Вид самой кривой изменяется с помощью инструмента карандаш <img src="image/pen.png" alt="">. Для создания прямых отрезков устанавливайте точки удерживая клавишу Shift. </p> </body> </html>

Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.

Картинка, выровненная по середине текста

Рис. 4. Картинка, выровненная по середине текста

webref.ru

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Задаем отступ текста для фото Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст.


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

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

Если вместо

написать

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

Отступ текста от краев картинки в данном случае задается css-стилем

Параметры отступа здесь указываются по часовой стрелке, начиная с отступа картинку сверху (3px), затем отступ от картинки справа (12px) и т.д.

www.web-article.com.ua

Обтекание картинки текстом при помощи 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 слева от изображения.

Пример:

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

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

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

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

Пример:

Оформление картинки

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

webmastermix.ru

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align="center". Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок по центру</title>  <style type="text/css">  P.fig {  text-align: center; /* Выравнивание по центру */  }  </style>  </head>  <body>   <p class="fig">  <img src="images/sample.gif" width="200" height="100" alt="Иллюстрация">  </p>  </body> </html>

В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Рис. 1. Рисунок в центре колонки текста

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

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок в тексте</title>  </head>  <body>   <p><img src="images/sample.gif" width="100" height="200"   alt="Иллюстрация" align="left"   vspace="5" hspace="5">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat.</p>   </body> </html>

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

Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок в тексте</title>  <style type="text/css">  IMG.fig {  float: right; /* Обтекание картинки по левому краю */  padding-left: 10px; /* Отступ слева */  padding-bottom: 10px; /* Отступ снизу */  }  </style>  </head>  <body>   <p><img src="images/sample.gif" width="100" height="200"   alt="Иллюстрация" class="fig">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat.</p>   </body> </html>

В данном примере к тегу <img> добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.

Рисунок на поле

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

Рис. 3. Изображение размещается на поле слева от текста

Рис. 3. Изображение размещается на поле слева от текста

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

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

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок на поле</title>  <style type="text/css">  TD.leftcol {  width: 110px; /* Ширина левой колонки с рисунком */  vertical-align: top; /* Выравнивание по верхнему краю */  }  </style>  </head>  <body>  <table width="100%" cellspacing="0" cellpadding="0">  <tr>   <td class="leftcol"><img src="images/igels.png"   width="90" height="78" alt="Вы не поверите, но это   ёжик"></td>  <td valign="top">Ёжики защищены от внешней агрессии колючим   панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом   ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это   хищник. Да, он не питается волками и лисами, но только потому, что уступает   им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td>  </tr>  </table>  </body> </html>

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

Изображение слева от текста

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

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

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок на поле</title>  <style type="text/css">  #pic {  float: left; /* Обтекание картинки текстом */  }  #text {  margin-left: 110px; /* Отступ от левого края */  }  </style>  </head>  <body>   <div id="pic">  <img src="images/igels.png" width="90" height="78"   alt="Вы не поверите, но это ёжик">  </div>  <div id="text">  Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех,   кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное   и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами,   но только потому, что уступает им в размерах. А вот закусить червячком или даже   змеей ему вполне под силу.  </div>  </body> </html>

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

Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.

htmlbook.ru

(620x90, 233Kb)
Html текст справа от картинкиHtml текст справа от картинки
По многочисленным просьбам читателей объясню еще раз, как расположить текст справа и слева от картинки, внизу картинки, вверху и посредине.

Html текст справа от картинкиКак же сделать так, чтобы текст располагался справа от картинки, весь , а не только одна его строчка. Посмотрим сначала как выглядит просто HTML код картинки, загруженный через радикал. Я взяла небольшую картинку, которую вы видите слева от текста. Просто код ее выглядит вот так. (адрес картинки (тот что находится в кавычках) может меняться, если вы грузите ее через другие источники)

Html текст справа от картинки

Теперь добавляем к нему атрибут align, который отвечает за выравнивание, и так как мы хотим чтоб картинка была слева от текста, то добавляем =»left». Теперь наш код будет выглядеть вот так.
Html текст справа от картинки

Html текст справа от картинкиЧто бы картинка была справа от текста, добавляем так же к нему атрибут align, который отвечает за выравнивание и =»right». т.е. справа. Теперь наш код будет выглядеть вот так.
Html текст справа от картинки

ВНИМАНИЕ — Если вы грузите картинки через другие источники, то в конце кода, перед последними кавычками стоит закрывающая дробь (косая палочка)
Clip2net_150820113022 (700x102, 26Kb)

Тогда атрибуты align=»left», и align=»right» СТАВИТЕ ПЕРЕД НЕЙ.
последняя (700x119, 38Kb)

Или проще напишу так. В HTML формате в конце кода (перед последними кавычками (и дробью, если она есть)) нужно добавить align=»left» и картинка будет слева от текста или align=»right» и картинка будет справа от текста. (Скопируйте эти символы право-лево и поставьте в конце кода своей картинки)

Теперь внимание. Коды картинки всегда должны стоять впереди текста, а текст следом за кодами. Например вы хотите поставить картинку справа от теста. Это должно выглядеть вот так
Html текст справа от картинки

Но это не все: текст может располагаться внизу картинки (это по умолчанию), посередине, и вверху.
Вот так это выглядит.

Html текст справа от картинкитекст внизу картинки

Html текст справа от картинкитекст посередине картинки

Html текст справа от картинкитекст вверху картинки

Ну а теперь напишу по порядку коды, которые надо добавлять в конце HTML -кода картинки, перед последними кавычками, что бы ваши картинки вставали так, как вы этого хотите.
добавить
align=»left» -и картинка будет слева от текста
align=»right» -картинка будет справа от текста.
align=»bottom» -картинка будет внизу текста
align=»middle» -картинка будет посредине текста
align=»top» — картинка будет вверху текста.
Вот пока и все. Не буду грузить сразу много информации. Дальше о картинках расскажу позднее. Успехов в вашем творчестве.

(620x90, 233Kb)

www.liveinternet.ru

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

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

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

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

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

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

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

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

  • 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:

< style >

.fotoleft{

float:left;

margin: 5px 12px 3px 0px;

}

< /style >

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

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

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

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

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

Html текст справа от картинки«>

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

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

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

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

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

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

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

#circle

{

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

float:left;

}

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

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

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

Заключение

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

www.syl.ru


You May Also Like

About the Author: admind

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

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

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