Иногда встречаю в верстке два и более абсолютно одинаковых блока, но имеющие разные классы.
Например:
69_or
Визуально видно, что блоки совершенно одинаковые, но при верстке возникает вопрос, как быть с последним блоком, ведь каждый блок несет значение ширины блока и правого отступа, а у последнего блока нет отступа, и тут чтобы не отступать от макета, последнему блоку задают дополнительный класс, в котором прописан правый отступ равен нулю.
Но правильнее прописать родительскому блоку таких элементов отрицательный правый маргин, равный значению правого отступа однотипных блоков, если же значение велико, и родительский блок заступать на другие блоки, либо же выступит за область самой страницы, для этого нужно создать еще один родительский блок со значением 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;}

70_or

Прикрепленный файл: 95_www.rar (11.74 Kb)

Оценить:|1
  
Комментировать
Раздел: Обучение    
Просмотров: 2678
Комментариев (9)
  1. Deff
    Андрей Данилов [Deff]
    12.11.2011 в 15:39

    а мне, когда лень баловаться с родительскими блоками (для ие6, если есть отрицательный марджин, ещё нужно position:relative писать, а в этой связи и за hasLayout следить), я через jQuery добавляю класс для последнего блока через .last-child

  2. SelenIT
    SelenIT
    12.11.2011 в 20:03

    Может, удобнее левые маргины добавлять/нивелировать? Тогда во многих случаях и доп. обертка не нужна.

    А для однострочного варианта (как на картинке) можно еще обнулить левый маргин первому элементу через :first-child.

    И, наконец, существует вариант на базе inline-block + text-align:justify (с маленькими хитростями для разных браузеров, зато вообще не требующий подгонки отступов и работающий для любой ширины, в т.ч. резиновой).

    • Ольга [Olga]
      12.11.2011 в 23:38

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

      • SelenIT
        SelenIT
        02.12.2011 в 05:44

        Как показывает опыт, рваная сетка в последней строке — тоже дело поправимое :)

        • Deff
          Андрей Данилов [Deff]
          19.12.2011 в 00:22

          чёт в опере 11 и фф3.6 с блоками в последней строке тоже грабли

          • SelenIT
            SelenIT
            19.12.2011 в 05:18

            В FF3.6.13 (Win 7) проблем не наблюдаю, а в Опере есть слегка, но подгонкой значений минимизируется до одного случая из возможных вариантов ширины (см. примеры с 7 и 8 блоками). На крайний случай, есть несемантичный, но железобетонный проверенный вариант с настоящими блоками-распорками вместо псевдоэлемента…

            Оценить:|0
              
  3. Xap4o
    Роман [Xap4o]
    10.06.2013 в 08:24

    а если две строки будет и больше?
    можно написать так ведь .item+.item {margin-left:40px}

Оставить комментарий