Блок картинок вирівняний по лівій і правій стороні

Блок картинок вирівняний по лівій і правій стороні
Задача
Отже, вам приходить макет, а в ньому (о жах!) Блок картинок дизайнером старанно вирівняний по обидві сторони. Приблизно так:

Є два варіанти: Зверстати без вирівнювання, а дизайнерові сказати що по обидва боки вирівняти не можна, або Зверстати так як треба.
Отже, ідея
Якщо картинок 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" />
<title>Неймовірне поруч - по обидві сторони!</title> </head> <body>
<header><h1>Вирівнювання по обидві сторони блоку</h1></header>
<section> <article><img src="1.png" alt="1"/></article> <section> <article><img src="2.png" alt="2"/></article> <article><img src="3.png" alt="3"/></article> <article><img src="4.png" alt="4"/></article> <article><img src="5.png" alt="5"/></article> </section> </section>
<footer>Правильна, і працює в internet explorer 6-7-8, 1-2-3 firefox, opera, chrome 2, safari 3</footer>
</body> </html>

Тепер 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;
}

Цікаво

Інетрнет експлорер № 7 вічно не вистачає піксела. А шостому - двох. Ну якщо з шостим все зрозуміло (пам'ятаємо ми його тягу до парних відстані), то чому таке відбувається в сьомому - таємниця покрита мороком.
Через це, спочатку була ідея зробити замість 25%, 24.9%. Це потім вже згадав про негативні відступи. Але опера мене вразила в саме серце. Виявляється вона не розуміє нецілим значень відсотків (24.9% вона розуміє як 24% - що критично). Вона єдина, з усього звіринця.

Висновки
Можливо хтось таке вже використав, але я не бачив статей з описом цього методу. (Погано шукав, ага)
Однозначним плюсом цього методу можна віднести такі речі:

Проста реалізація, кросбраузерность (internet explorer 6-7-8, 1-2-3 firefox, opera, chrome 2, safari)
Відсутність великої кількості хаков (використовується 1 хак), повна відсутність експрешнов і javascript-коду (Той js відноситься до HTML5, на роботу методу не впливає))

Мінуси проте теж є:

Логіку не можна укласти в одновимірний список ul-li
Погана семантичного

Коментарі

Добавити коментар