Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста.
Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Код
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Обтекание</title> <style> .leftimg { float:left; /* Выравнивание по левому краю */ margin: 7px 7px 7px 0; /* Отступы вокруг картинки */ } .rightimg { float: right; /* Выравнивание по правому краю */ margin: 7px 0 7px 7px; /* Отступы вокруг картинки */ } </style> </head> <body> <h2>Правила сайта</h2>
<p> <img src="http://artnov.ucoz.com/_ld/0/42302196.gif" alt="Правила" width="126" height="114" class="leftimg">
Настоящие Правила созданы с целью поддержания порядка на данном сайте.
Ваша регистрация на этом сайте предполагает ваше согласие с этими
Правилами. Администрация оставляет за собой право изменять правила.
Запрещено следующее: 1. Осуждать действия администрации и оскорблять пользователей сайта не зависимо от группы пользователей.
2. Использовать нецензурную лексику, в первый раз предупреждение, за второй раз бан на неделю, за третий раз бан навсегда.
3. Использовать аватары и (или) подписи, содержание которых оскорбляют и (или) унижают пользователей.
4. Проявлять расовую, национальную и религиозную неприязнь, пропагандировать терроризм, экстремизм, наркотики.</p> </body></html>
Или в CSS вставить
Код
.leftimg {float:left; /* Выравнивание по левому краю */
margin: 7px 7px 7px 0;}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
А в атрибуте class: Код
<img src="http://artnov.ucoz.com/_ld/0/42302196.gif" alt="Правила" width="126" height="114" class="leftimg">
