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

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

Хочу рассказать, как в таких случаях правильно установить в нужном месте картинку и оптимизировать. Рассмотрим варианты обтекания картинки текстом.
Чтобы картинка располагалась строго по центру достаточно воспользоваться редактором Блоггер. И чтобы убрать лишнюю ссылку достаточно нажать на функцию ссылка. Это вы всё и без меня знаете.

Как правильно расположить небольшое изображение по центру.

танцы, танцы,танцысмайлик зажигаеттанцы. танцы,танцы
Код.

<img src=" Адрес (url) изображения" alt="танцы" height="50" width="50" title="танцуем" style="vertical-align: middle;"/>

Картинка слева от текста (повторюсь). Обтекание картинки текстом.

обезьянкаОбезьянки Мармозетки, Замечательные детки - Арди, Брюс, Базилио Прилетели к нам в субботу Самым первым самолётом Прямо из Бразилии!
Целый день едят конфетки,
Прочитали все газетки

Код.



<img src=" Адрес (url) изображения " alt="обезьянка" height="104" width="147" title="весёлая обезьянка" style="float: left; margin: 0 5px;"/> Остальное содержание.

Картинка справа от текста.
\обезьянка

До чего смешная рожица! То напыжится, то съёжится... Подняла весёлый крик, Показала всем язык. Засмеялся папа - Не язык - "лопата"! Ну а я был очень мил - Ей улыбку подарил, Угостил бананом: -Кушай, обезьяна!


Код.

<img alt="обезьянка" height="104" src=" Адрес (url) изображения " style="float: right; margin: 0 5px;" title="весёлая обезьянка" width="147" />


Если нужно прекратить обтекание изображения, можно конечно наставить кучу тегов <br>,<br>. Но это будет неправильно. В том месте где следует прекратить обтекание вставьте в текст следующее:
<br style="clear: both">

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

clear: both | left | none | right

Всё сегодня. Спасибо за ваш визит. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


7 комментариев:

  1. Постараюсь использовать в своих блогах в ближайшее время! БОЛЬШОЕ СПАСИБО!

    ОтветитьУдалить
  2. Виктория! Доброе утро! Я сделала в одном из своих блогов обтекание картинки текстом! Здорово получилось! СПАСИБО! Смотрите 2 последних сообщения в БЛОГЕ Кота Васьки - http://www.pussyvasyacat.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Ирина, всё здорово. Только вот что-то блог долго грузится. Может стоит убрать некоторые гаджеты-часики, календарики. И размеры картинок уменьшить. Почитайте вот эту статью http://www.shpargalochki.ru/2014/05/gorkij-opyt-tozhe-opyt.html
      Спасибо за Ваши комментарии и что заглядываете. Ваське привет.

      Удалить
  3. Здравствуйте! Самый главный тег вы дали в конце поста, вот реально для новичка бороться с этим обтеканием текста это что-то. Непонятно почему Blogger в редактор не включил эту функцию. А то, если захочешь красиво свои картинки расставить без лишнего текста, можно только по центру — слева и справа он тебе не даст. Спасибо за подсказку, просто когда начинаешь искать, тебе расскажут о многих интересных вещах, но самое главное, элементарное, которое тебе мешает двигаться дальше, об этом умолчат.

    ОтветитьУдалить
  4. Здравствуйте. Ну значит нужно пробовать всё, чтобы понять как правильно. Вот для информации ещё как сделать обтекание круглых картинок http://www.shpargalochki.ru/2017/11/obtekanie-tekstom-kruglyh-izobrazhenij.html

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

    ОтветитьУдалить
    Ответы
    1. Привет. И то верно. Все мы друг у друга учимся. Ни кто не рождается со всеми знаниями. Все с азов начинаем.Спасибо Вам за внимание к моему блогу.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск