1

示例：JS 小提琴

$(document).ready(function(){  
    sync_height(".title",".row");
    sync_height(".header-label",".row");
});

function sync_height(class1, class2) {
    var h1 = 0, h2 = 0;
    $(class1).each(function(){
        h1 = Math.max($(this).height(), h1);
    });
    $(class2).each(function(){
        h2 = Math.max($(this).height(), h2);
    });
    console.log("Max heights computed: h1="+h1+" h2="+h2);
    if(h1 < h2) { // Set height to the max height encountered 
                  // between the two class elements.
        $(class1).each(function(){
            $(this).height(h2);
        });
    }else{
        $(class2).each(function(){
            $(this).height(h1);
        });
    }
    console.log("Final heights post sync: h1="+
                $(class1).height()+
                " h2="+$(class2).height());
}

我在很多地方读过使用表格的 TD 属性来对齐两个 HTML 元素来模拟面板布局。我可以轻松地使用第一列代表嵌套 UL/LI 树的单个表来创建树表。但是对于我的应用程序，我需要一个树表，其中列表部分是独立的 div，单元格表部分是单独的 div。（此外，还有一个多级跨栏标题，它由另一个表格表示，位于单元格表格的顶部，但这超出了本次讨论的范围）。因此我无法建立传统意义上的树表（即在表中模拟树）

我的目标是对齐列表部分 (li id="listTree") 和表格部分 (table id="cellTable") 之间的“行”。我在示例中计算 jQuery 中的高度，并在小部件中同步 LI 和 TR 元素之间的高度，但我没有成功使 UL 部分同步，这导致“红色”间隙可以在顶部和底部看到列表（左侧）。关于如何同步树和表行的任何想法？我假设只要我正确地进行像素数学运算，我就应该能够根据所需的尺寸进行同步？

4

1 回答 1

2

问题是像 a 这样的内联元素span不会占用 CSS 中表示的高度。

尝试将此添加到您的样式中：

.header-label {
    display: inline-block;
}

查看更新的小提琴

于 2013-07-02T06:29:45.440 回答