Ваш IP: 54.92.197.82

Главная » Обтекание картинки текстом

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

 

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

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

<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, или наоборот. Текст будет обтекать картинку или блок в зависимости от Вашего желания.

Обтекание картинки текстом обновлено: Июль 9, 2017 автором: admin

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

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*