|
Меню сайта |
|
|
Подпись справа от рисунка.
Подпись справа от рисунка
Чтобы текст располагался справа, для тега <IMG> требуется установить свойство float со значением left. Оно задает выравнивание по левому краю и, соответственно, обтекание текстом по правому. Но этого недостаточно, высота блока в этом случае формируется по тексту, а не изображению, что портит всю работу. Поэтому обтекание надо отменить и сделать это требуется после рисунка и текста, воспользовавшись стилевым атрибутом clear, например, добавив <br style="clear: left">. В примере показан альтернативный вариант отмены обтекания с помощью пустого контейнера <DIV>.
Пример:
<!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">
.pic {
border: 1px solid #333;
background-color: #f0f0f0;
color: navy;
padding: 10px;
width: 250px;
}
.pic img {
border: 1px solid #333;
float: left;
margin-right: 7px;
}
.pic p {
margin: 0px;
padding-top: 20px;
}
.pic div {
clear: left;
}
</style>
</head>
<body>
<div class="pic">
<img src="0110.gif" width="150" height="120" alt="Этот светильник эсклюзив">
<p>Этот светильник эсклюзив</p>
<div></div>
</div>
</body>
</html>
При использовании параметра float элементы выравниваются по верхнему краю, поэтому в данном примере для абзаца добавлено поле сверху (padding-top), оно позволяет несколько сместить текст вниз.
Пример:
Подпись справа от рисунка
Подпись справа от рисунка
Этот светильник эсклюзив
|
|
|
|
