Задача
Итак, вам приходит макет, а в нём (о ужас!) блок картинок дизайнером старательно выровнен по обе стороны. Примерно так:
Ну в верстаем мы только резину!
Есть два варианта:
Сверстать без выравнивания, а дизайнеру сказать что по обе стороны выровнять нельзя, либо
Сверстать так как нужно.
Итак, идея
Если картинок 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. Я таки плохо искал, говорят хабражители:
Статья
Пример с изображениями
Пример с блоками
Примеры различной реализации (в том числе и нерабочие примеры) от Криса
