Stfw.RuКак сделать обтекание картинки текстом?
🕛 19.01.2009, 19:17
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создается с помощью стилевого атрибута float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right - по правому. Обтекание при этом происходит по другим, свободным сторонам.Пример 1. Обтекание картинок
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Обтекание</title> <style type="text/css"> .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, который добавляет отступы между картинкой и текстом. Этот атрибут одновременно задает отступ сверху, справа, снизу и слева от элемента.