保持div頂部對齊樹，而不是巢級別對齊

我想我想要做的是最好的例子來解釋，所以看http://jsfiddle.net/56E4Y/2/。保持div頂部對齊樹，而不是巢級別對齊

我想讓div全部對齊在它們互相容器的頂部，而不是與其他div的頂部對齊，與它們自己的嵌套層次相同。

這工作，如果我讓.col向左浮動，但這使得行重排我不想。我希望行保持完整，並通過水平滾動進行查看。另外，如果有人知道一個用於製作和操作這種html樹的輕量級庫，請讓我知道。我的使用案例只涉及任意葉節點的插入，所以我只關心性能。我能找到的唯一的圖書館是樹的other kind。（更像一個傳統的樹向下鑽取菜單）

中的jsfiddle來源：

HTML

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

JS（只是建立一個樹成#tree）

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

HERE是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

保持div頂部對齊樹，而不是巢級別對齊

回答

相關問題