html - 保持 div 树顶部对齐，而不是嵌套级别对齐

Question

我认为我正在尝试做的事情最好通过示例来解释，所以请参阅 http://jsfiddle.net/56E4Y/2/ .

我希望所有 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;
}

Answer 1

这是一个 FIDDLE .

CSS

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

很高兴我能提供帮助。祝你好运!