Держите дерево divs выровненным, не выровненным на уровне гнезда

Я думаю, что то, что я пытаюсь сделать, лучше всего объяснить на примере, поэтому см. http://jsfiddle.net/56E4Y/2/.Держите дерево divs выровненным, не выровненным на уровне гнезда

Я хочу, чтобы все div были выровнены в верхней части их взаимного контейнера, а не выровнены в верхней части других divs на том же уровне гнездования, что и они сами.

Это работает, если я делаю .col float слева, но это делает переплавки строк, которые я не хочу. Я хочу, чтобы строки остались нетронутыми и просматривались с помощью горизонтальной прокрутки.

Кроме того, если кто-то знает небольшую библиотеку для создания и обработки таких html-деревьев, пожалуйста, дайте мне знать. Мой вариант использования включает только вставки на произвольных листовых узлах, так что это все, что мне действительно важно в отношении производительности. Единственные библиотеки, которые я мог найти, были для дерева other kind. (. Больше похоже на высверливания меню, чем традиционное дерево)

Источник jsfiddle:

HTML

<div id="tree"></div>

JS (только строит дерево в Дерево папок)

var data = [[],[[]],[]]; 
var tree_area = document.getElementById('tree'); 
function buildTree(array, node) { 
    var msg = document.createElement('div'); 
    msg.textContent = 'foo'; 
    msg.className = 'node'; 
    node.appendChild(msg); 

    var row = document.createElement('div'); 
    row.className = 'row'; 
    node.appendChild(row); 

    array.forEach(function(child) { 
     var col = document.createElement('div'); 
     col.className = 'col'; 
     row.appendChild(col); 

     buildTree(child, col); 
    }); 
} 
buildTree(data, tree_area);

CSS

div { 
    margin: 3px; 
    padding: 3px; 
    display: inline-block; 
} 
#tree { 
    width: 400px; 
    overflow: auto; 
    border: 1px solid black; 
} 
#tree .col { 
    min-width: 100px; 
    background: rgba(0, 0, 255, 0.1); 
    display: inline-block; 
} 
#tree .row { 
    background: rgba(255, 0, 0, 0.1); 
    display: inline-block; 
    white-space: nowrap; 
} 
#tree .node { 
    display: block; 
    background: rgba(0, 255, 0, 0.1); 
    width: 150px; 
}

источник

2014-01-26 user992364

Как многоуровневая вертикальная навигационная панель? – TimSPQR

Не совсем, потому что все уровни разворачиваются сразу, а верхние элементы горизонтально сдвинуты, чтобы освободить место для полного взрыва поддеревья и по-прежнему выровняться с их соответствующими поддеревьями. Добавьте еще [[[[[], [[]]], [], [], [[[[]], []]]]]] данные в jsfiddle, чтобы понять, что я имею в виду. – user992364

Это Чрезвычайно образно - поздравляю! Я поместил vertical-align: top в tree .col, добавил некоторые дополнительные [] s и обновил вашу скрипку - http://jsfiddle.net/timspqr/56E4Y/1/. Но мне интересно, если вы ищете что-то еще. Наверное, не так просто. – TimSPQR

ЗДЕСЬ FIDDLE.

CSS

#tree .col { 
    min-width: 100px; 
    background: rgba(0, 0, 255, 0.1); 
    display: inline-block; 
    vertical-align: top; 
}

Рад, что смог помочь. Удачи!

источник

2014-01-26 18:37:42 TimSPQR

Держите дерево divs выровненным, не выровненным на уровне гнезда

ответ

Смежные вопросы