Верстка блоков горизонтально без лишних классов

Довольно часто приходиться верстать блоки, когда они расположены горизонтально, с расстоянием между собой и впритык к краям родительского блока. Например, вот так:

верстка блоков горизонтально

Основная трудность здесь возникает с размещением блоков и отступов между ними. Т.е. каким образом разместить блоки, чтобы они были одновременно и прижаты к краям, и имели одинаковый отступ?

Как видно на картинке, у всех блоков, кроме последнего, есть отступ справа. Однако, если для всех этих блоков прописать margin-right: 20px, то последний блок не поместится в блок parent и окажется внизу. Обычным решением является задание отдельного класса для последнего блока, и прописать отступ равный нулю. Однако есть решение лучше, можно обойтись и без класса.

Для этого нужно увеличить ширину блока parent на расстояние отступа, в нашем случае на 20px, тогда последний блок станет на место. При этом parent раздвинет на 20px и блок container, а это может поломать структуру страницы, поэтому для container надо прописать overflow: hidden;

верстка блоков горизонтально

Прием полностью кроссбраузерный. Возможно не идеальный, но он работает, а это главное.

  • В принципе неплохое решение, не всегда конечно удастся его применить, но тем не менее оно займет свое место в копилке моих приемов =))
    Спасибо!

  • главное потом не забыть флоат закрыть 😉

    • Я пользуюсь вот таким ластиком
      .clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

      • Этот ластик хорош если не требуется поддержка ИЕ6, а вот если клиент непременно требует и ИЕ6, то приходится либо пустые блоки с clear:both; использовать, либо экспрешены =((

        • Для IE6 достаточно написать:
          * html .clear {zoom: 1; clear: both;}

  • Doroga_v_Nebo

    Отлично, как раз такая проблема была…
    Спасибо за пост.

  • Спасибо за пост и хорошее описание.

  • Отлично, занес ваш блог в закладки как раз в скором времени хочу изучить верстку.

  • Если честно не понимаю зачем так извращаться))) ну все как бы ясно, но можно же и first-child, потому что вот эти «вылезания» за границы родительского блока иногда же боком выходят, и не во всех случаях применимы. но.. имхо конечно)

    • Я ж не против first-child, только IE6 о нем не догадывается 🙂 А так способ рабочий, но не везде применим, согласен, однако на большинстве фиксированных макетов его можно использовать.

      • Прохожий

        :first-child прекрасно работает в IE6 с помощью expression

        • Какой к черту expression? Зачем ставить костыли на JavaScript , когда Юрий предложил решение на чистом CSS.

  • У меня есть по-моему более гибкое решение, основанное на селекторах сестринских элементов.

    [html]
    <ul class="parent">
    <li>content</li>
    <li>content</li>
    <li>content</li>
    </ul>
    [/html]

    [css]
    .parent li {float:left; width:170px; margin-right:20px;}
    .parent li+li+li {margin-right:0;}
    [/css]

    Плюсы:
    1. Не нужно тревожить предков
    2. Каждую колонку можно стилизовать (если нам например нужны колонки разной ширины)
    3. Этим методом можно решать и другие задачи (например для стилизации пунктов меню для CMS)

    Кстати, вопрос не совсем по теме.
    Когда я пытаюсь позиционировать (relative) внутри плавающих блоков в IE возникает баг — содержимое пропадает. При масштабировании окна браузера оно появляется, не подскажете как это можно фиксануть?

    • Когда писалась статья этот способ был еще актуален. Сейчас же, когда IE6 ушел в небытие, a IE7 спешит за ним, это вообще не проблема)
      По поводу вопроса трудно сказать, слишком мало информации.

  • Sashko

    а можно еще .parent задать отрицательный правый margin на ширину отступа.
    .parent {margin:0 -20px 0 0;}