Как сделать список в две колонки css
Обновлено: 05.07.2024
Время от времени возникает задача расположить список или текст в две колонки. Годы идут, CSS развивается, поколения верстальщиков сменяют поколения, но свои костыли люди как делали, так и делают. Мало кто знает, но в CSS появилось свойство
column-count , позволяющее задать количество колонок для списка или текста. Также есть свойство
column-width , которое задаёт минимальную ширину для колонки,
column-rule , отрисовывающее линию между колонками словно border,
column-gap , задающее расстояние между колонками и
columns , объединяющее в себе column-width и column-count.
Разберемся на примерах из жизни. Простой пример: нужно сделать так, чтобы список располагался в две колонки.
Добавим следующий CSS-код:
В результате получим это:
Просто, не правда ли? А теперь посмотрим на немного более сложный пример. Итак, наши клиенты - люди с планшетами. Наше веб-приложение похоже на газету и листать её нужно слева направо, а не вниз, как остальные сайты. Текст должен располагаться в три колонки на экран. Общее количество колонок неизвестно, также, как и количество текста.
Из задания лишь понятно, что высота приложения должна быть равна высоте экрана пользователя, а за раз на экране должно быть отображено три колонки. Для начала, создадим контейнер, который бы занимал весь экран и имел прокрутку слева направо.
Теперь определим стили для текста. Мы понимаем, что так как колонки должно быть три, то каждая колонка должна иметь ширину 1/3 от ширины страницы. Это означает, что ширина колонки должна быть 100vw/3. Но число 33.333333vw не очень красиво выглядит. А свойство column-width задаёт именно минимальную ширину колонки. То есть, ширина колонки всегда будет подбираться автоматически, однако, минимальная ширина будет такой, какой мы её зададим. Давайте зададим ширину колонки в 30vw - это ровное число, которое меньше 33.3333vw.
И добавим немного стиля. К примеру, расстояние между колонками и тонкую серую линию между ними.
Посмотрим, что получилось: запустить пример
Если вы видите не три колонки, значит, по мнению вашего браузера, ширины окна недостаточно для размещения трёх колонок текста. Установите column-width немного меньше, поэкспериментируйте и получите приемлемый для вас результат.
У меня есть "упорядоченный список", который содержит около 100 "элементов списка". Это ol делает мою страницу очень длинной, и пользователям приходится прокручивать слишком много.
Как я могу заставить UL показать так:
в идеальном мире вы могли бы использовать колонки с помощью CSS3 модуль но, к сожалению, в настоящее время он поддерживается только частично браузерами webkit и gecko (с использованием-webkit и-moz).
Если вы не имеете значения вертикальный порядок, но макет:
Вы можете просто установить элементы таким образом:
это должно работать. Если вам нужно иметь их в вертикальном порядке, вам нужно действовать в скрипте php, разделяя их на отдельные divs, а затем плавающие их.
было статья в списке отдельно некоторое время назад, который охватывает именно этот вопрос. Я думаю, если того, что там упоминается, недостаточно, вы, конечно, всегда можете вернуться к серверному кодированию или кодированию на стороне клиента, чтобы автоматически разделить список на три части.
я смог получить правильный заказ с небольшим jQuery:
основные стили для .liCol:
Я создал решение, которое работает для упорядоченных (нумерованных) списков. Эти списки должны продолжать нумерацию по столбцам.
добавьте следующий скрипт на свою страницу (не важно где, лучше всего в отдельном js-файле):
затем вы можете просто создать несколько списков столбцов, как это:
Итак, установка и rel=" [number_of_columns] " и скрипт сделает все остальное!
У меня была аналогичная проблема сегодня утром, если вам нужны только современные браузеры, вы можете сделать это так:
вы можете использовать 2D-преобразования: они имеют более широкую поддержку современным браузером, чем столбцы CSS3. Смотрите мой ответ здесь
поскольку у меня была та же проблема и я не мог найти ничего "чистого", я думал, что опубликовал свое решение. В этом примере я использую перевернутую while цикл, поэтому я могу использовать splice вместо slice . Преимущество теперь в том, что splice() нуждается только в индексе и диапазоне, где slice () нуждается в индексе и сумме. Последнее, как правило, становится трудным во время цикла.
недостаток мне нужно обратить стог пока добавление.
пример:
cols = 4; liCount = 35
для петли с кусочком = [0, 9]; [9, 18]; [18, 27]; [27, 35]
обратный ход сращивания = [27, 8]; [18, 9]; [9, 9]; [0, 9]
код:
поэтому я изучил это и нашел решение, которое будет работать для всех браузеров.
мой список HTML:
обратите внимание, что я дал последним 4 элементам списка класс второго списка, это важно для нашего jQuery.
затем, на моей веб-странице, Я сделал div с class second-list-appender во втором столбце, столбце, в котором я хочу, чтобы мой второй список был.
см., я на самом деле делаю 2 списка из 1, но сделать его похожим на один список из 2 столбцы, давая начало второго списка следующий номер предыдущего списка.
Я сделал это с 2 столбцами, но вы можете просто повторить этот процесс или создать функцию и вызвать ее в цикле, сколько раз вы хотите ее повторить.
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float со значением left , которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).
Пример 1. Создание двух колонок
Приведенный способ создания колонок хорош тем, что ширину первого слоя можно задавать как в пикселах, так и процентах. При этом поменяются только значения свойств width и margin-left (пример 2).
Пример 2. Ширина колонки в процентах
Окончательный вариант создания макета приведен в примере 3.
Пример 3. Полный листинг
При использовании отступов и полей помним, что браузер устанавливает ширину слоя с учетом свойств width , border , padding и margin .
Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.
Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)
Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.
Базовый пример
Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.
Наша отправная точка содержит немного очень простого HTML; обёртка с классом container внутри которого имеется заголовок и несколько параграфов.
с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств column-count или column-width (en-US). Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:
Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.
Измените ваш CSS чтобы использовать следующий column-width :
Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.
Стилизация столбцов
Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:
- Изменение размера отступов между столбцами используя column-gap (en-US).
- Добавление линейки между столбцами при помощи column-rule .
Используя ваш пример выше, измените размер отступа добавлением свойства column-gap :
Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule . Таким же способом как и свойство border с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись column-rule-color , column-rule-style и column-rule-width (en-US) и принимает те же значения что и border .
Попробуйте добавить линейки других стилей и цветов.
Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap . Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap .
Свойств column-span
Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство column-span (en-US) установленное на значение all .
Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all .
Столбцы и фрагментация
Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.
Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.
Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации. Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство break-inside (en-US) со значением avoid к правилам .card . Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.
В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.
Перезагрузите страницу и ваши блоки должны остаться в целости.
Проверь свои навыки!
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.
Заключение
Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.
Читайте также: