Как сверстать горизонтальное дерево отделов компании?

Question

[Andrii Matenka]

Собственно вот что нужно сверстать prntscr.com/3lros1
Сами блоки сверстать не проблема. Проблема сверстать их универсально.
Чтобы независимо сколько блоков они отображались коректно.
Тобто парент над дочерним.
Для примера. В бухгалтерии может быть 3 отдела. И в отделе кадров также могут быть отделы.
Нужно чтобы отделы третьего уровня не налазилы друг на друга.
Возможно есть плагин, для такого рода деревьев, дайте ссылку.
Заранее спасибо.

Answer 1

[Павел Мышкин]

codepen.io/Pestov/pen/BLpgm?editors=110

Comments

[Andrii Matenka]

То что нужно. Спасибо.

Answer 2

[Илья Лесных]

Я такое 1-в-1 делал лет 5 назад. Линии верстал канвасом, а саму структуру хранил в БД. Тут самое интересное - многие пытаются хранить parent_id для организации nested set в БД, а нужно - хранить left и right, чтобы организовать т.н. круговую вложенность. Почитать можно здесь: phpclub.ru/detail/article/db_tree

Кстати, похожий таск: Как спроектировать модуль отдел, в котором были бы сотрудники отдела + краткое описание отдела под ZF2?

Comments

[Павел Мышкин]

Мне кстати тоже пришло в голову сначало CANVAS, но потом вспомнил решение на кодепене

[Илья Лесных]

@Pazys ну 5 лет назад CSS3 не было еще, а canvas было "модно, стильно, молодежно". Но решение с кодепена мне импонирует!