• Регистрация
  • Вход
MENU
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Обо всём » Собираем скрипты » Как сделать обтекание картинки текстом (Добавить изображение на страницу так, чтобы оно обтекалось р)
Как сделать обтекание картинки текстом
artnovДата: Воскресенье, 06.04.2014, 19:47 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 149
Награды: 0
Репутация: 0
Статус: Offline
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста.
Само обтекание создаётся с помощью стилевого свойства 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">
 


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Artnov
 
Форум » Обо всём » Собираем скрипты » Как сделать обтекание картинки текстом (Добавить изображение на страницу так, чтобы оно обтекалось р)
Страница 1 из 11
Поиск: