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;
}

很高兴我可以帮忙。祝你好运！

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

1 个答案: