Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
или как поместить изображение рядом с текстом (искал в Yandex, и
нашел интересный материал который может вам помочь при создание изящных
веб страниц, метод работает на серверах ucoz.ru)
сама статья
http://htmlbook.ru/faq/kak-sdelat-obtekanie-kartinki-tekstom
и так приступим
Решение
Обтекание картинки текстом обычно используется для компактного
размещения
материала и связывания между собой иллюстраций и текста.
Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
<!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="images/1.jpg" alt="Лейтенант Бокатуев" width="132"
height="174" class="leftimg">
Вчера во время проведения разведоперации наша группа подверглась
нападению неизвестногопротивника в камуфляжной форме Алиенов.
В результате эффективной обороны и стремительной контратаки многочисленная
группа боевиков была смята и отброшена.Среди личного состава потерь нет.
Бойцы разведгруппы проявили недюжие навыки
владения оружием. Особо отличился в бою взводный Кудряшев М.А.,
грамотно использовавший человеческие ресурсы своего взвода.
В результате операции
были захвачены элементы внеземной культуры, которые переданы
аналитической группе.</p>
<h2>Пресс-релиз аналитической группы</h2>
<p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии
аффекта" class="rightimg">
В наших секретных лабораториях в рамках проекта «Пандора»
разрабатывалось
психотропное оружие. В результате неудачного эксперимента большинство
ученых, работавших
над прибором, подверглись воздействию психотропного излучения, и они,
находясь в состоянии
аффекта, растащили прототип по деталям. Возможно, наши ученые до сих
пор находятся в
состоянии аффекта.</p>
</body>
</html>
Использование свойства float заставляет текст плотно прилегать к
изображению. Поэтому в примере введёно универсальное свойство margin,
которое добавляет отступы между картинкой и текстом. Это свойство
одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
взято с http://htmlbook.ru/faq/kak-sdelat-obtekanie-kartinki-tekstom
| 