Блок картинок выровненный по левой и правой стороне
Раздел:
Programming /
Вебмастеру
@
01.09.2009 |
Ключевые слова: css выравнивание картинок
Автор: CAH4A Источник: habrahabr
Задача Итак, вам приходит макет, а в нём (о ужас!) блок картинок дизайнером старательно выровнен по обе стороны. Примерно так:
Ну в верстаем мы только резину!
Есть два варианта: Сверстать без выравнивания, а дизайнеру сказать что по обе стороны выровнять нельзя, либо
Сверстать так как нужно.
Итак, идея Если картинок 5, то по сути, нам нужно найти 4 одинаковых расстояния между ними. А что если 4 из них обернуть в блок с 1/4 ширины, а пятую вытащить за пределы блока, и дать ему обтекание?
Звучит страшно, поэтому вот схема:
Если и из картинки не стало понятно — то лучше кода никто не расскажет)
Немного отвлечённых размышлений Список картинок, зачастую создаётся из ненумерованного списка (я считаю это наиболее правильно). Но по схемам HTML4, XHTML1.0, да и того же HTML5 нельзя группировать li-шки div-ом, так как, единственно валидным элементом внутри UL (да и OL) — является элемент LI.
Поэтому сделаем это в HTML5, но на элементах section-article :) (Давно хотел поверстать что-нибудь в HTML-5) Вообще, метод точно так же будет работать на любой схеме, только придёться отказать от использования UL, и строить всё div`ах.
Код, в студию! HTML5:
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="ru" /> <!--[if IE]> <script> document.createElement(`header`); document.createElement(`nav`); document.createElement(`section`); document.createElement(`article`); document.createElement(`aside`); document.createElement(`footer`); </script> <![endif]--> <title>Невероятное рядом — по обе стороны!</title> </head> <body> <header><h1>Выравнивание по обе стороны блока</h1></header> <section class="images"> <article><img src="1.png" alt="Лесовичёк"/></article> <section> <article><img src="2.png" alt="Лесовичёк"/></article> <article><img src="3.png" alt="Лесовичёк"/></article> <article><img src="4.png" alt="Лесовичёк"/></article> <article><img src="5.png" alt="Лесовичёк"/></article> </section> </section> <footer>Валидно, и работает в internet explorer 6-7-8, firefox 1-2-3, opera, chrome 2, safari 3</footer> </body> </html>
* This source code was highlighted with Source Code Highlighter.
Теперь CSS:
header, section, article, footer { display: block; }
header, footer { margin: 10px 20px; padding: 20px; }
.images { width: 75%; margin: 20px; padding: 20px; background: #f5f5f5; } .images article { float: left; } .images section { overflow: hidden; zoom: 1; } .images section article { width: 25%; // margin-left: -2px; /*Интернет-эксплореру 7, конечно-же, нехватило одного пикселя, а вот шестому не хватает целых двух :)*/ text-align: right; }
* This source code was highlighted with Source Code Highlighter.
Любопытно
- Инетрнет эксплореру №7 вечно не хватает пиксела. А шестому — двух. Ну если с шестым всё понятно (помним мы его тягу к чётным расстояниям), то почему такое происходит в седьмом — тайна покрытая мраком.
- Из-за этого, вначале была идея сделать вместо 25%, 24.9%. Это потом уже вспомнил про отрицательные отступы. Но опера меня поразила в самое сердце. Оказывается она не понимает нецелых значений процентов (24.9% она понимает как 24% — что критично). Она единственная, со всего зверинца.
Выводы Возможно кто-то такое уже использовал, но я не видел статей с описанием этого метода. (Плохо искал, ага)
Однозначным плюсом этого метода можно причислить такие вещи:
- Выглядит довольно интересно для вэба, не избитый приём
- Простая реализация, кросбраузерность (internet explorer 6-7-8, firefox 1-2-3, opera, chrome 2, safari )
- Отсутствие обильного количества хаков (используется 1 хак), полное отсутствие экспрешнов и javascript-кода (Тот js относится к HTML5, на работу метода не влияет))
Минусы тем не менее тоже есть:
- Логику нельзя уложить в одномерный список ul-li
- Плохая семантичность
Спасибо за внимание. PS. Вот пример. Прошу прощения за хостинг, со своим сервером пока что проблемы( Для того чтобы посмотреть чистый код, вот архивчик
UPD. Я таки плохо искал, говорят хабражители: Статья Пример с изображениями Пример с блоками Примеры различной реализации (в том числе и нерабочие примеры) от Криса
Вернуться в раздел:
Programming /
Вебмастеру
|