Иногда встречаю в верстке два и более абсолютно одинаковых блока, но имеющие разные классы.
Например:
Визуально видно, что блоки совершенно одинаковые, но при верстке возникает вопрос, как быть с последним блоком, ведь каждый блок несет значение ширины блока и правого отступа, а у последнего блока нет отступа, и тут чтобы не отступать от макета, последнему блоку задают дополнительный класс, в котором прописан правый отступ равен нулю.
Но правильнее прописать родительскому блоку таких элементов отрицательный правый маргин, равный значению правого отступа однотипных блоков, если же значение велико, и родительский блок заступать на другие блоки, либо же выступит за область самой страницы, для этого нужно создать еще один родительский блок со значением overflow:hidden
<div class="catalog"><div class="catalog_inner"> <div class="item">…</div> <div class="item">…</div>… <div class="clear"></div> </div></div>
.cl {clear:both; }
.catalog {overflow:hidden;}
.catalog_inner {margin:0 -38px 0 0; }
.item {width:90px; float:left; padding: 0 38px 0 0;}
Прикрепленный файл: 95_www.rar (11.74 Kb)
а мне, когда лень баловаться с родительскими блоками (для ие6, если есть отрицательный марджин, ещё нужно position:relative писать, а в этой связи и за hasLayout следить), я через jQuery добавляю класс для последнего блока через .last-child
А если это не последний элемент, а целая галерея блоков + резина + ИЕ6? ;)
я ж не претендую на самую красивость решения, ключевое слово лень:)
кроме того, просто last-child недостаточно, т.к. при отключенной яве порвёт
Может, удобнее левые маргины добавлять/нивелировать? Тогда во многих случаях и доп. обертка не нужна.
А для однострочного варианта (как на картинке) можно еще обнулить левый маргин первому элементу через :first-child.
И, наконец, существует вариант на базе inline-block + text-align:justify (с маленькими хитростями для разных браузеров, зато вообще не требующий подгонки отступов и работающий для любой ширины, в т.ч. резиновой).
1. Согласна, можно и левый;
3. Вариант очень интересный, он просто идеально подходит для меню с равными расстояниями между пунктами, подходит и для решения описанной мною задачи, но только для однострочного варианта, для многострочного будет рваться сетка из блоков при разном количестве блоков в строках, в последней строке чаще всего меньше, чем в предыдущих, ну это зависит еще и от постановки задачи.
Как показывает опыт, рваная сетка в последней строке — тоже дело поправимое :)
чёт в опере 11 и фф3.6 с блоками в последней строке тоже грабли
В FF3.6.13 (Win 7) проблем не наблюдаю, а в Опере есть слегка, но подгонкой значений минимизируется до одного случая из возможных вариантов ширины (см. примеры с 7 и 8 блоками). На крайний случай, есть несемантичный, но железобетонный проверенный вариант с настоящими блоками-распорками вместо псевдоэлемента…
а если две строки будет и больше?
можно написать так ведь .item+.item {margin-left:40px}