Размещение текста рядом с картинкой

Загрузка ...


Текст может располагаться сверху, внизу, снизу и рядом с картинкой.

<img src="image.jpg" align="top"> - размещение текста вверху

<img src="image.jpg" align="middle"> - размещение текста посередине

<img src="image.jpg" align="bottom"> - размещение текста снизу

<img src="image.jpg" align="left"> - размещение текста справа

<img src="image.jpg" align="right"> - размещение текста слева

По умолчанию ширина и высота картинки равна реальным размерам картинки, чтобы саму картинку не менять в размерах, можно это сделать с помощью тэгов (он её сожмет, но будет выглядеть немного криво):

<img src="image.jpg" width="100" height="200">

Где width="100" - цифра регулирует ширину картинки

height="200" - цифра регулирует высоту картинки

<img src="image.jpg" alt="моя первая картинка на сайте"> - если навести курсор мыши на рисунок, то через некоторое время выскочит описание картинки, в этом случае выскочит "моя первая картинка на сайте".

Для приведения примера понадобится маленькая картинка, примерно 100х100 пикселей.

<HTML>

<head>

<title>Мой первый сайт!</title>

</head>

<body>

<center><H3>Добро пожаловать мой первый сайт!</H3></center>

<font size="2"><img src="image.jpg" align="right" alt="моя первая картинка на сайте" width="100" height="200"> Учиться искусству создания сайта необходимо, ведь Интернет предлагает нам уникальную возможность заявить о себе, проявить свой творческий талант и быть услышанным. Вступив на эту дорогу, вам придетсяотдавать вашему будущему сайту все силы, всю энергию, весь талант. <br>

Учтите еще и вот что: процесс создания сайта включает в себя как технические, так и чисто творческие моменты </font>

</body>

</html>

В примере показано, как разместить текст по левому краю, а также описание картинки, высота и ширина. 



Как сделать обтекание картинки текстом?

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства 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>

Результат данного примера показан на рис. 1.

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.