Как сделать блок с лева

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

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.flowers img – определяет свойства изображения img в блоке <div class="flowers"> </div>.
  • float:left – определяет обтекание слева направо.
  • margin: – определяет отступ по всему периметру изображения.
  • border:1px solid #000000 – определяет свойства границы элемента.
  • <div style="clear:left"> </div> – останавливает обтекание с левой стороны, то есть обтекание не будет распространяться на данный блок и на следующие элементы.

Возьмем предыдущий код и немного изменим описания «останавливающего» 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>

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

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

  • clear:both – отменяет обтекание как слева, так и справа.
  • align="" – определяет горизонтальное выравнивание.

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

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

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


Источник: http://ab-w.net/CSS/css_floating.php


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Css3 - Расположить блоки в очередности сверху-вниз - слева Разборный стеллаж своими руками

Как сделать блок с лева 2 inline-block - один слева, другой справа. - Проблемы верстки
Как сделать блок с лева Позиционирование элементов по разным сторонам блока
Как сделать блок с лева Html - Как сделать, чтобы 2 блока div были на одной прямой
Как сделать блок с лева Позиционирование блоков
Как сделать блок с лева Блочная модель
Как сделать блок с лева Cвязать свитер женский спицами схема молодежный
Как сделать блок с лева Делаем настольные лампы и абажуры своими руками
Как сделать блок с лева Дорожки в саду из природного камня
Железная твердость, железный коготь El Corazon 418 - 14мл Как и какие грядки можно сделать на даче своими Как сделать дерево своими руками Как сделать розы из лент своими руками Коды на GTA 5 - самые лучшие и безбашенные читы на ГТА 5 Микрогранулированная пудра для обесцвечивания Ответы : Как две круговые диаграммы объединить в один