Как создавать обтекание картинки текстом html? Обтекание изображения текстом

Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - 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; - когда списка находятся за пределами текста списка.

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

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

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

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

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

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

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

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

            1. Для выделения фрагмента (блока) в документе в HTML служит элемент

              …
            2. Для определения стиля элемента служит универсальный атрибут