Выравнивание изображений
В старых версиях HTML для выравнивания изображений у тега <IMG> имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.
style="float:left" — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.
style="float:right" — прижимает изображение к правой стороне блока, а текст обтекает его слева.
Пример выравнивания изображения по левому краю.
<!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>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" style="float:left" width="100" height="50" alt="Летящая птица">
После картинки.
</p>
<p>Последний параграф.</p>
</body>
</html>
Результат в браузере
style="clear:left" — прерывает обтекание изображений выровненных по левой стороне.
style="clear:right" — прерывает обтекание изображений выровненных по правой стороне.
style="clear:both" — прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
<!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>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" style="float:left" width="100" height="50" alt="Летящая птица">
После картинки.
</p>
<p style="clear:left">Последний параграф.</p>
</body>
</html>
Результат в браузере
Дата добавления: 2015-12-11; просмотров: 832;