在表格单元格和表格行高度对齐内包含动态内容的Div

Question

我需要将div放在表格单元格中。 div和像元高度应始终根据div的动态内容对齐。

如果在其中插入文本，则Div高度会增加，但其他div的高度保持不变：

示例： http ： //jsfiddle.net/BWYQg/

作为解决方法，我使用js扩展了剩余div的高度（增加div的最小高度），但是如果在插入后清除了内容，则会看到以下图片：

示例： http ： //jsfiddle.net/BWYQg/1/

因此，问题是如何使dt和div高度始终根据div的内容对齐？

UPD： div的内容应该是可编辑的（ <div contenteditable> ），因此在键入文本后div的高度会增加。

Answer 1

请参见等高功能。 http://www.catswhocode.com/blog/8-awesome-jquery-tips-and-tricks希望获得帮助。

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}



$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});

Answer 2

我可能会建议使用这样的jQuery等高类型的插件：

您只需要在每个DIV上添加相同的类并在调用插件时引用该类即可。

http://www.cssnewbie.com/download/jquery.equalheights.js

因此，您需要从上面的页面下载等高的JS文件，并在调用jQuery之后将其包含在您的网页中。

然后像这样调用脚本：

$(document).ready(function() {

    $('.myDiv').equalHeights();

});

Answer 3

您始终可以从具有内容的元素中获取.height（），并将其设置为动态设置为其他元素。 例如：

var $tdContentHeight = $('tr td .has-content').height();
$('tr').find('td .has-no-content').each(function() { $(this).height($tdContentHeight)})

此外，您可以比较高度，并始终选择最高的高度并将其分配给tr中的所有其他元素。

再次更新。 在这里检查：

http://jsfiddle.net/BWYQg/31/