Галерея превьюшек

Вы можете задать обтекание группе объектов, создав таким образом панель навигации, или галерею картинок, давайте для примера разберем галерею превьюшек.

Расположим несколько изображений в виде списка, каждый элемент списка содержит маленькую превьюшку и описание. Нормальное отображение элементов списка, это один под другим, мы же используем свойство обтекания, чтобы сделать вывод галереи.

Для начала зададим для всего списка идентификатор id = “thumb”, и уберем значки списка и дефолтные отступы:

#thumb {    list-style: none;    margin: 0;  }

Теперь зададим стиль для элементов списка свойство обтекания заставит элементы сгруппироваться в левой части один за другим в горизонтальныю линию, занимая все свободное место блока:

#thumb li {    float: left;     display: inline;    width: 75px;  }

Заданная ширина в 75px необходима, чтобы текст подписи расположился под изображением, 75 это точная ширина картинок, как вы можете увидеть в примере 12 есть еще некоторые свойства для элементов списка #thumb li они служат для достижения лучшего визуального эффекта.

Два основных правила для галереи это float и display, display: inline использовано для того, что бы избавиться от бага в IE с двойным отступом для обтекаемых элементов.

Я могу разместить любое количество изображений и подписей к ним, а вывод столбцов и колонок будет меняться в зависимости от размеров окна браузера пользователя. Посмотреть все это в действии можно в примере 12 и поиграйтесь с размерами окна браузера.

Пример 12

Не забываем о том, что в галерее все картинки должны быть одинаковой ширины и высоты, а так же подписи должны иметь примерно одинковое количество символов. В случае, когда изображения имеют разные высоты, или подписи разной длинны, некоторые из обтекаемых элементов тоже будут разниться по высоте, и у вас получится разноряжная строка блоков div.

Один из способов решить эту проблемму, это присвоить элементам #thumb li размер по высоте самого большего элемента. В примере13, я добавил несколько слов в одну из подписей и увеличил высоту до 11em.

Пример 13

Еще немного о содержании обтекаемых блоков

Пример 3 показывал нам, что обтекаемое изоражение не полностью закрыт внутри своего блока, есть несколько путей добиться того, что контейнер полностью закрывает включенные в него элементы. Примеры 7-10 используют правило clear: both в футере, что позволяет растянуть контейнер, в этих примерах это срабатывает потому, что футер находится в томже блоке, что и обтекаемый контент, но иногда нужно добиться желаемого эффекта с элементами не удовлетворяющими этому условию.

Три других способа показаны в примере 14.

Пример 14

Первый способ, это добавление несемантического элемента <div class="clear"></div> после обтекаемого элемента вне блока. вот CSS для такого блока:

.clear {    clear: both;  }

Второй способ это добавлени свойства overflow для обтекаемых объектов, добавим на блок правило overflow: auto, заставляя блок растянуться до размеров вложенных элементов.

#container {    overflow: auto;  }

Это сработает во всех современных браузерах, старый IE для макинтоша может в ответна это отобразить полосу прокрутки. Для версий IE ниже IE7 имеется проблемма с растягиванием блоков, решается добавлением hasLayout на блок #container. Я использую #container {zoom: 1;} в этих примерах. Это не влияет на браузер Firefox который не обрабатывают zoom, но заставляет IE6 и ниже корректно отображать элемент.

Третий метод показан в примере 14 , он использует overflow: hidden. Работает это так же как и overflow: auto, но вы не получите никаких ненужных скроллбаров, зато некоторый контент, например картинки может быть обрезан.

Обтекание: предупреждения о багах

Старые версии Internet Explorer (6 и ниже) могут вызвать баг двойного отступа (double-floated margin). Если элемент имеет отступ с той стороны, с которой установлено обтекание, то IE удвоит отступ с этой стороны. Эта проблема отлично решается с добавлением правила display: inline.

Еще одна проблема с IE, это поведение браузера в том случае, когда контен по размеру больше содержащего его контейнера. Если элемент слишком широк или высок для содержащего его блока, то IE растянет блок под размер, то соседний элемент может перенестись, из - за нехватки места. Самый простой способ решения, это добавить overflow: hidden,

Понимание основ поведения обтекаемых объектов поможет вам применять свойство float в различных ситуациях, надеюсь вам помогла эта статья.