Div表格单元格和表格行高度对齐内的动态内容 [英] Div with dynamic content inside table cell and table row height alignment

问题描述

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

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

示例：

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

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

解决方案

参见等高函数。 http://www.catswhocode.com/blog/8-awesome -jquery-tips-and-trick 03希望这个帮助。

  function equalHeight（group）{
最高= 0; 
 group.each（function（）{
 thisHeight = $（this）.height（）; 
 if（thisHeight> tallest）{
 tallest = thisHeight; 
} 
}）; 
 group.height（最高）; 
} 
 
 
 
 $（文件）.ready（function（）{
 equalHeight（$（。recent-article））; 
 equalHeight（$（。footer-col））; 
}）; 
  

I need to place div inside table cells. Div and cell height should be always aligned according to the dynamic content of the div.

Div height increases if text is inserted inside it but other div's heights remain the same:

example: http://jsfiddle.net/BWYQg/

As workaround i use js to expand remaining div's heights (increasing div min-height), but if content is cleared after insertion i see the following picture:

example: http://jsfiddle.net/BWYQg/1/

So the question is how to make td and div heights always aligned according to the content of the divs?

UPD: Content of the div should be editable (<div contenteditable>), so div height increases after text typing.

解决方案

See the equal height function. http://www.catswhocode.com/blog/8-awesome-jquery-tips-and-tricks Hope this help.

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

这篇关于Div表格单元格和表格行高度对齐内的动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！