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

Оставьте комментарий 6,950

Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.

Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:

  • выравнивание изображения по центру
  • обтекание изображения текстом
  • размещение изображения в поле

Выравнивание изображения по центру

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

Для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега

Как это реализовано, смотрите в примере 1.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок по центру</ title > <style type = "text/css" > </ style > </ head > <body > <p class = "cimg" > <img src = "images/sample.gif" width = "200" height = "100" alt = "Иллюстрация" > </ p > </ body > </ html >

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

В данном примере к контейнеру

Добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.

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

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

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

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

Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега - vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).

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

1 2 3 4 5 6 7 8 9 10 11 12 13 <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" > </ p > </ body > </ html >

Рисунок в тексте

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.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок в тексте</ title > <style type = "text/css" > </ style > </ head > <body > <p > <img src = "images/sample.gif" width = "100" height = "200" alt = "Иллюстрация" class = "cimg" > 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 >

Рисунок в тексте

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.

Здесь к тегу добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.

Изображение на поле

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

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


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

Я знаю два способа создать подобную структуру — с помощью HTML-тегов

и с помощью CSS-правила margin. Рассмотрим эти два способа:

Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ — во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).

Пример 4. Размещение изображения на поле с помощью таблиц

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок на поле</ title > <style type = "text/css" > </ style > </ head > <body > <table width = "100%" cellspacing = "0" cellpadding = "0" > <tr > <td class = "leftcol" > <> </ td > <td valign = "top" > </ td > </ tr > </ table > </ body > </ html >

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

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

то, что получится в результате показано на рисунке 4.


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

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

CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя

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

Пример 5. Размещение изображения на поле с слоев и CSS-стилей

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <code > <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок на поле</ title > <style type = "text/css" > </ style > </ head > <body > <div id = "pic" > <img src = "images/igels.png" width = "90" height = "78" alt = "Вы не поверите, но это ёжик" > </ div > <div id = "text" > Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </ div > </ body > </ html >

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

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

Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.

P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.

Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - float:left; , текст списка обтекает её справа, как на скриншотах. При обтекании картинки, (нумерация, маркировка) списка наползают на изображение и получается трабл (trouble , англ. - «ошибка», «проблема»). Щёлкайте картинки для полного просмотра:

Напрашивается простой способ подправить ситуацию - увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»

В случае простого увеличения отступа (margin) у рисунка, вместе со списком - «уезжает» вправо и обычный текст

Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. Корень проблемы кроется в редко используемом свойстве элемента списка . Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside - маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside - маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).

Значение list-style-position по умолчанию, для всех браузеров - outside . Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:

li {
  margin: 0;
  padding-left: 1,9em;
  list-style-position: inside;
  text-indent: -1em;
  overflow: hidden;
  }

Прописать спасительный код для элемента списка (

  • ) можно глобально (как в примере), или с присвоением индивидуального класса, например.list (код CSS .list ol>li,.list ul>li{list-style-position: inside;} ). В первом случае, код для обтекания картинки будет распространяться глобально - на все списки на странице, во втором - только на списки класса list (class=”list”).

    Разница большая:

    • При назначении глобальных свойств, действующих сразу на все списки на странице - изменяются элементы управления, созданные на основании этих свойств и списков. В результате - «уезджают» меню и менюшки навигации сайта.
    • В случае с индивидуальным классом, вида (class=”list”) - его придётся вставлять вручную в html-код требуемых списков.
    • Выручает «золотая середина» - найти в шаблоне класс текстового блока страницы и назначить свойства обтекания рисунков только для его списков. Тогда, в тексте новости (сообщения, комментария) страницы - списки будут красиво обтекать картинки и изображения, а остальная часть сайта - останется неизменной.

    Прописанное свойство для элемента списка (

  • ) слегка отражается на свойствах самого списка (теги
      ,
        ). Оно и вестимо, ведь «втянув» маркёр внутрь списка и сделав отступ для его отображения (padding-left: 1,9em;) мы визуально уменьшили ширину списка на 1,9em. Подобная мелочь с успехом исправляется в CSS, в свойствах списков (теги
          ,
            ). Примечательно, что изменение отступа для списка никак не отражается на его обтекании рисунка

            Перед началом работы со списком по данной теме, неплохо ему задать рамку (свойство border:2px solid #000;). Это позволит наглядно увидеть расположение бу́ллетов «до» и «после» редактирования.

            Интересный эффект обтекания картинки даёт простое использование для списка CSS-свойства overflow: hidden; . В этом случае - обтекание выполнится нормально, но у списка будут отсутствовать маркёры (бу́ллеты). Иногда, именно такой эффект и требуется получить. Пример кода для обтекания рисунка списком, с простым overflow: hidden;

            Код CSS для элементов списка

            li {overflow: hidden;}

            Код CSS для всего списка
            (глобально, для всей страницы):
            ul,ol {overflow: hidden;}

            Подобные извращения с overflow: hidden; навеяны вышестоящим кодом. На самом деле, такого-же эффекта можно достичь простым list-style: none; Это CSS-свойство убирает маркеры списка без всяких там «обрезаний». Кроме этого, свойство работает в любой ситуации, тогда как overflow: hidden; - только в сочетании с list-style-position: outside; - когда списка находятся за пределами текста списка.

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

            Позиционирование картинок относительно текста может производиться в html или с помощью свойств CSS.

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

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

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

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

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

            < p>< img src =" foto1.jpg ">< /p>

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

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

            Атрибуту можно задавать следующие значения:

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

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

            margin: 5px 12px 3px 0px;

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

            < img src= "foto1.jpg" class="fotoleft" >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            Заключение

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

            Как сделать обтекание картинки текстом в HTML и CSS - 4.4 out of 5 based on 16 votes

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

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

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

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

            Где foto.jpg - это относительный путь к картинке..jpg

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

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

            Теперь рассмотрим каждый элемент на практике.

            1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

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

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

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

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

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

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

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

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

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

            Leftfoto{ float:left; margin: 4px 10px 2px 0px; }

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

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

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

            Обтекание рисунка текстом. Мы с вами уже многому научились. Как создать диаграмму в Word, Как создать красивую рамку в Word, Как нарисовать схему в Word 2003, Как изменить цвет страницы в Word, и многому другому. А сейчас хотелось бы узнать, как сделать обтекание рисунка текстом?

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

            И так вы пишете статью и вставляете в неё картинку. Но, что-то вас не устраивает. Картинка смотрится как-то не так. Лучше было бы, чтобы текст обрамлял её. Для начала закиньте картинку на страницу и выделите её (щелкните по ней мышкой). Потом внизу откройте панель Рисование выберите Обтекание текстом . Какое именно обтекание тестом выбрать – это уже как вам нравиться.

            • Рисунок в тексте.
            • Текст вокруг рамки.
            • Текст по контуру рисунка.
            • Рисунок за текстом.
            • Рисунок перед текстом.
            • Текст сверху и снизу.
            • Сквозное обтекание текстом.
            • Изменить контур обтекания.

            Подберите то, что вам нравиться.

            Word 2007/2010

            Выделите картинку. Откройте меню Разметка страницы и перейдите на блок Упорядочить .

            Нажмите на маленькую стрелочку на кнопке Обтекание текстом .



    © Copyright 2024, https://qzoreteam.ru