Подскажите, как вывести древовидные списки в колонки?

Тема в разделе "Верстка", создана пользователем danneo, 15 май 2019.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.505
    Симпатии:
    115
    Есть категории с вложенностью с 3-4 уровнем. Нужно это как-то вывести так, чтобы кол-во в двух столбиках было одинаково (с учетом вложенных, т.к. их разное кол-во).
     
  2. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    235
    Симпатии:
    370
    пример бы или макет
     
    yaski нравится это.
  3. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.505
    Симпатии:
    115
    что-то типа этого http://jsfiddle.net/3q7Lc2yp/1/
    выводится длинный список справа, а слева пустое место получается. Списки могут меняться, добавляться, поэтому нужно динамически как-то, чтобы были максимально заполнены все пустоты. Как вариант (придумал сейчас), выводить сначала главный раздел, а затем на столбики делить, получится вообще без пустот. Можно как-то в колонки не слева направо, а сверху вниз, а потом вправо (без float и inline-block)?
     
  4. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    235
    Симпатии:
    370
    честно говоря, я все еще не понимаю, как, зачем и что вообще происходит
    подобные списки обычно выводятся в одну колонку
    если речь идет о множестве нод, то используется что то вроде tree.js
    если все же колонки то https://www.w3schools.com/css/css3_multiple_columns.asp

    в целом, я прочитал все три раза, не особо вник, но подсознательно мне кажется, что это конфликт возможностей css, адекватности реализации и хотелок

    а, понял в чем конфликт, колонки и вложенные списки плохо сочетаются :crazy:
     
  5. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    64
    Симпатии:
    24
    Я похоже понял что вам нужно, тут 2 варианта подхода:

    1) если так как на вашем примере: "Путешествия и туризм" заголовок левого столбика и "Красота и здоровье" заголовок правого,
    и так должно быть в обязательном порядке - тогда увы.. У вас нет возможности чтоб количество категорий в списках было одинаково.

    2) Если необязательно как в вашем примере, то можно это решить так:
    идет первый заголовок' к примеру "Путешествия и туризм" и под ним все его категории колонками, можно "inline-block" или "Flex".
    Заканчиваем с "Путешествия и туризм", пошел второй заголовок "Красота и здоровье" и под ним как и под первым его категории колонками.
     
  6. Amigo_AdDa

    Amigo_AdDa Писатель

    Регистр.:
    11 окт 2016
    Сообщения:
    1
    Симпатии:
    0
    тут css не справится, надо костыль из js , чтоб тот просчитывал высоту блоков и если между верхним и нижнем есть большой отступ , подтягивал его выше....