Как разделить список на 2 колонки css

Вывести список в 2 колонки

помогите пожалуйста решить проблему есть список в блоке определённой высоты. высота списка больше высоты блока, поэтому он отображается в 2 колонки у меня не получается сделать так чтобы сначала заполнялась пунктами списка первая колонка, затем вторая. выглядит это так

Отслеживать
задан 3 ноя 2013 в 7:09
1,781 2 2 золотых знака 23 23 серебряных знака 37 37 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.wrap ol < list-style-position: inside; -moz-column-count: 2; /* Firefox */ -webkit-column-count: 2; /* Safari and Chrome */ column-count: 2; list-style-type: decimal; height: 200px; >

1. Real time analitics dashme analitics daboard
2. Real dashboard
3. Real time analitics dashboard
4. Real time ard
5. Real time analitics dame analitics dame analitics dashboard
6. Real titics dashboard
7. Real time analitics dashboard
8. Real time anahboard
9. Real time analitics dme analitics dame analitics daashboard
10. Real time analitics dashboard
11. Real time anahboard

Отслеживать
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
ответ дан 3 ноя 2013 в 7:32
vkovalchuk88 vkovalchuk88
1,846 1 1 золотой знак 22 22 серебряных знака 31 31 бронзовый знак

спасибо за вариант решения. но на картинке немного другое — сначала заполняется первый столбец до полной высоты блока-родителя

3 ноя 2013 в 7:43
Так оно так и есть пробовали менять? jsfiddle.net/4E9sB Обновил.
3 ноя 2013 в 8:00

@vkovalchuk88, сначала должна заполняться левая колонка, на всю высоту блока, и только если не влезло — правая. Смотрите картинку, приложенную к вопросу.

3 ноя 2013 в 8:22
Вы смеетесь? А как в моем примере, по другому?
3 ноя 2013 в 8:24

@vkovalchuk88, увеличил высоту в несколько раз — действительно работает, прошу простить. Текст крупный, при увеличении на 100-200 пикселей разницы не видно.

3 ноя 2013 в 8:31

• css3
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Колонки — Основы верстки контента

Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.

Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.

Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.

Создание колонок

Для создания колонок в CSS существует свойство column-count . Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.

 class="columns-2"> David Bowie, original name David Robert Jones, (born January 8, 1947, London, England—died January 10, 2016, New York, New York, U.S.), British singer, songwriter, and actor who was most prominent in the 1970s and best known for his shifting personae and musical genre hopping. To call Bowie a transitional figure in rock history is less a judgment than a job description. Every niche he ever found was on a cusp, and he was at home nowhere else—certainly not in the unmoneyed London suburb where his childhood was as dingy as his adult life would be glitzy. While this born dabbler’s favourite pose was that of a Great Artist beguiled by rock’s possibilities as a vehicle, in truth he was more a rocker drawn to artiness because it worked better than any other pose he had tried (not that he was not eclectic—he admired Anthony Newley and Jacques Brel and studied mime with Lindsay Kemp).  

.columns-2  column-count: 2; > 

Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.

.columns-2 p  margin-top: 0; > 

По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width — с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width , здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.

Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.

Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂

.columns-2  column-count: 2; column-width: 250px; > 

Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width . Последний пример можно записать так:

.columns-2  columns: 250px 2; > 

Первым значением записывается ширина колонки, а вторым их количество

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

Отступы между колонками

В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em . Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.

Задать отступы между колонками можно с помощью свойства column-gap . Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.

Вы можете использовать различные единицы измерения внутри свойства column-gap . Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.

.columns-2  columns: 250px 2; column-gap: 30px; > 

Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.

Границы между колонками

Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border , которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.

Для создания границы используется свойство column-rule , которое является краткой записью следующих свойств:

• column-rule-width — ширина границы.
• column-rule-style — тип границы. Значения совпадают со значениями свойства border .
• column-rule-color — цвет границы.

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

.columns-2  columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > 

Добавление контента в несколько колонок

Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.

Для разделения колонок используется свойство column-span . Оно принимает всего два значения:

• none — значение по умолчанию. Текст находится просто внутри колонок.
• all — текст «выходит из колонки» и разделяет их.

h2  text-align: center; column-span: all; > .columns-2  columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > 

Перенос колонок

В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.

• break-before
• break-after
• break-inside

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

При работе с CSS Multi-column Layout нас больше всего интересует значение avoid , которое запрещает перенос.

Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.

Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.

figure  border: 1px solid; break-inside: avoid; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Как сделать список li и ul в две колонки CSS

Так как множество есть функций на этих элементах, то иногда зайдешь на интернет ресурс, то смотришь все в одну колону установлено, а по правую сторону много места остается, то как раз здесь можно больше материала разместить и место не будет пустовать, а на нем разместится информация.

Сделать HTML список UL LI в две колонки при помощи CSS

Берем за основу стандартный и безусловно самый актуальный список.

Как установили его, то здесь нужно добавить стиль, который выведет темы в колонки.

.zornet_ru li

Чтоб понятно было, все проверил на работоспособность.

По умолчанию идет:

При добавление стиля и правкой свойствами свойставя margin и padding все стало совершенно по другому.

09 Ноября 2017 Просмотров: 13811 Комментарий: (6)
Поделиться в социальных сетях
Материал разместил
Похожие материалы

• Как сделать пробел при помощи HTML и CSS
• Как самому сделать горизонтальное меню на CSS
• Как сделать фон для сайта на CSS и HTML
• Примеры стильного оформление ul li списков CSS
• Как сделать полупрозрачный фон на чистом CSS

Порядок вывода комментариев:

workman 09 Ноября 2017 21:00 1 , ответ пользователю workman

Есть совершенно другой вариант, что предоставлена демонстрация, где выставлено в две колонки.

• Сайт ZORNET.RU
• Скрипты сайта
• Шаблоны сайта
• Дизайн портала
• Скрипты и шаблоны
• Все для сайта uCoz

• Сайт ZORNET.RU
• Скрипты сайта
• Шаблоны сайта
• Дизайн портала
• Скрипты и шаблоны
• Все для сайта uCoz

Kosten 09 Ноября 2017 21:27 2 , ответ пользователю Kosten

Здесь сразу маркеры нужно было запретить, или с ними должно идти, а так еще один вариант. Просто на первом, на zornet.ru не проверял, а хотел поставить, но нужно было адаптировать под мобильный аппарат, так как только немного меньше монитор по размеру, то все в одну строку, но так и должно.

Но вот только фон на всю ширину оставался, и здесь медео нужно прописать, что можно было, но все же решил другой тип поставить, как на урааа сайте, что идет в 4 картинки, думаю в сети есть этот информер или код.

-SAM- 10 Ноября 2017 01:55 3 , ответ пользователю -SAM-

В материале здесь пример разобран на списке похожих материалов. Выложенное выше workman — не для похожих материалов (ведь в них всё в одном ul находиться). Вот еще материал о разбивке на две колонки конкретно списка похожих материалов.

Что пишите, мол, оно «в сети есть» — на zornet неоднократно уже публиковалось, как вариант в Google вбить запрос site:zornet.ru Рекомендуем к просмотру ( и там через информер делается, а не через маркированный список ul\li, что вывод случайных материалов просто идёт, а не по тегам. ну, а вывод изображения в списке похожих материалов — это тоже писалось уже, что сделать не проблема внешне список этот, как если бы было через информер ).

Текст в две колонки

Метод основан на свойстве display: inline-block , но у него несколько особенностей:

• У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой white-space: nowrap у родителя.
• Нужно выровнять блоки по верхний границе с помощью свойства vertical-align: top .

.textcols < white-space: nowrap; >.textcols-item < white-space: normal; display: inline-block; width: 48%; vertical-align: top; background: #fff2e1; >.textcols .textcols-item:first-child

Результат:

Display table

Вторая проблема с отступами между колонками – если применять свойство border-spacing , то отступы появятся не только между колонками, но и снаружи, поэтому приходится добавлять border через :first-child и :last-child .

К достоинтству метода можно отнести то, что колонки будут одинаковой высоты.

.textcols < display: table; width: 100%; border-collapse: collapse; >.textcols-row < display: table-row; >.textcols-item < display: table-cell; width: 50%; vertical-align: top; padding: 0; background: #fff2e1; >.textcols-row .textcols-item:first-child < border-right: 30px solid #fff; >.textcols-row .textcols-item:last-child