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

Загрузка ...

Картинки и текст

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

<style type="text/css">
 .leftimg {
 float:left; /* Выравнивание по левому краю */
 margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
 }
 .rightimg {
 float: right; /* Выравнивание по правому краю */ 
 margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
 }
 </style>
<h2><b>Название</b></h2>
<p><img src="http://ваш сайт.ru/kartinki/02.jpeg" alt=""class="leftimg">дальше текст</p>

Теперь обратим внимание на две нижние строчки.
1."Название" - ели есть название текста с картинкой, то вписываем название, а если название отсутствует, то эту строчку нужно просто удалить.
2. Нижняя строчка представляет собой непосредственно картинку и текст, который будет обтекать картинку

На сайте uCoz адреа картинки найдёте в файловом менеджере. В коде есть элемент class="leftimg". В нём можно менять left наright. Это делает возможность тексту обтекать картинку с лева или с права картинки.

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

Есть еще один способ обтекания текстом картинок и рекламных блоков. Необходимо в нужном месте вставить простой код:

<div style="display:block;float:left;margin:5px 5px 5px 5px;">сюда вставляете код картинки или рекламного блока</div>
Код достаточно простой. В зависимости от места расположения картинки или рекламного блока, слева или справа, в коде необходимо менять left на right, или наоборот. Текст будет обтекать картинку или блок в зависимости от Вашего желания.

Что Еще Почитать:
  1. Разделительные линии
  2. Основные коды html
  3. Увеличение картинки
  4. Кликабельная картинка
  5. Коды HTML
  6. Вставить логотип в шапку
  7. Как самостоятельно сделать баннер
  8. Спойлер для сайта
  9. Добавляем картинку в шапку шаблона
  10. Баннер в шапке