Игорь Штанг (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