CSS обтекание текста

CSS обтекание изображений

Урок 22. Обтекание элементов web-страницы в CSS

CSS атрибуты и значения, определяющие обтекание

CSS атрибут float определяет обтекание одних элементов другими.

Пример CSS обтекания с параметром float:left:

<title>CSS обтекание</title>
<style type="text/css">
div.flowers img {float:left; margin:26px; border:1px solid #000000}
div.flowers a:hover img {margin:26px; border:1px solid #ffffff}
</style>

</head>
<body>
<div class="flowers">
<a href="#"><img src="../images/bee.jpg" alt="" width="160" height="160"
border="0" /></a>
<a href="#"><img src="../images/flower4.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/flower5.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/flower.jpg" alt="" width="160" height="160"
border="0" /></a>
<a href="#"><img src="../images/flower3.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/bee2.jpg" alt="" width="160" height="160"
border="0" /></a>
</div>
<div style="clear:left"> &nbsp; </div>
</body>

Как результат обтекания изображений, мы имеем галерею:

 

Атрибуты и значения

Возьмем предыдущий код и немного изменим описания «останавливающего» div-а:

<div style="clear:left; background-color:DeepSkyBlue; width:160px; height:160px; border:1px solid #000000"> &nbsp; </div>

и откроем результат обтекания в новом окне.

Уберите параметр clear:left и вы вряд ли останетесь довольны таким обтеканием.

Пример CSS обтекания с параметром float:right:

<title>CSS обтекание</title>
<style type="text/css">
div.flowers_2 img {float:right; margin:26px; border:1px solid #000000}
div.flowers_2 a:hover img {margin:26px; border:1px solid #ffffff}
</style>

</head>
<body>
<div class="flowers_2">
<h1 align="center">Цветы</h1>
<a href="#"><img src="../images/flower4.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower5.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower3.jpg" width="160" height="160" border="0" /> </a>
<h1 align="center" style="clear:both">Цветы и пчелы</h1>
<a href="#"><img src="../images/bee.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/bee2.jpg" width="160" height="160" border="0" /> </a>
</div>
</body>

Результат: обтекание с правой стороны

Атрибуты и значения

Изображения с пчелами расположены после блока, отменяющего обтекание с правой стороны, но они по-прежнему держатся правого края. Почему? Потому что данные изображения расположены внутри блока <div class="flowers_2"> </div> и, поэтому попадают под CSS свойства селектора div.flowers_2 img.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 21. CSS изображение   CSS обтекание   Урок 23. CSS позиционирование

    Сохранить в сервисы и закладки