2

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

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

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

作为解决方法，我使用 js 扩展剩余 div 的高度（增加 div min-height），但如果在插入后清除内容，我会看到下图： 删除的文本

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

所以问题是如何让 td 和 div 的高度总是根据 div 的内容对齐？

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

4

3 回答 3

4

参见等高函数。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"));
});
于 2012-08-17T11:36:58.830 回答
0

我可能会推荐使用 jQuery 等高类型的插件，例如这个：

您只需将相同的类添加到每个 DIV 并在调用插件时引用它。

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

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

然后你像这样调用脚本：

$(document).ready(function() {

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

});
于 2012-08-17T10:07:22.800 回答
0

您始终可以从具有内容的元素中获取 .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/

于 2012-08-17T10:13:05.710 回答