Код вашей страницы

<html>
<head>
<style type="text/css">
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>В параграф ниже мы добавили изображение со свойством float:right. В результате изображение выровнялось по правому краю, а текст обтекает его слева. К изображению мы добавим черную рамочку из точек. Кроме того мы добавим отступы, чтобы текст не прилипал к изображению.</p>
<p>
<img src="image/logocss.gif" width="95" height="84" />
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
</p>
</body>

</html>

Результат в окне браузера

В параграф ниже мы добавили изображение со свойством float:right. В результате изображение выровнялось по правому краю, а текст обтекает его слева. К изображению мы добавим черную рамочку из точек. Кроме того мы добавим отступы, чтобы текст не прилипал к изображению.

Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф.

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки