Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Список и ширина колонки

У каждого списка есть своя оптимальная ширина колонки, а точнее, оптимальный диапазон ширины — такой, в котором ему комфортно. (Под списком я подразумеваю любые мелкие порции — кусочки текста, сопоставимые по структуре и объему.)

Возьмем пример с короткими элементами. Если пунктов немного, то проблемы нет:


Чем длиннее список, тем больше разрастается дыра справа. Верстка перестает быть модульной (и компактной):


Логичное решение — разбить на колонки. Вопрос в том, сколько колонок сделать. При трех еще дыряво, зато есть запас прочности на случай, если вдруг появится Константинопольский К. К. Хороший вариант для веба, где всё немного плавает:


Если Константинопольского К. К. не предвидится, можно уместить и в четыре. Хорошее решение для печати, где всё железно:


В пяти колонках останутся обрезки, да и средник слишком узкий:


Другой пример. Правый край получился рваным из-за того, что строки сильно отличаются по длине:


Разбиваем на два столбца. Так аккуратнее:


Иногда бывают варианты. Этому списку удобно и в одной, и в двух колонках:



В трех тоже выглядит неплохо, но читается хуже, слишком частый ритм:


Вывод: подбирайте ширину колонки в зависимости от количества и объема пунктов списка. Всё просто, однако плохие примеры на каждом шагу.
Tags: верстка, знаю как, колонка, список, статья
Subscribe

Posts from This Journal “статья” Tag

  • Чем плоха чересполосица

    Чересполосицу часто предлагают как альтернативу линейкам, но альтернатива эта так себе. У нее есть неочевидная проблема: Чересполосица может…

  • Слишком ровный правый край

    Продолжаю серию статей про неудачные приемы верстки. Когда дизайнеры впервые узнают о принципе модульности и о том, что прямоугольники нужно…

  • Стыковка линеек и плашек

    Линейки и плашки — сильный инструмент верстки, а с любым сильным инструментом нужно уметь обращаться. Попытки организовать макет с помощью…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments