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

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

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

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

<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


3 комментария:

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

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

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

      Удалить

Пользовательский поиск
Foto Saya
My Photo