2

テーブルセル内にdivを配置する必要があります。Divとセルの高さは、Divの動的コンテンツに従って常に調整する必要があります。

テキストがその中に挿入されると、Divの高さが増加しますが、他のDivの高さは同じままです。 挿入されたテキスト

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

回避策として、jsを使用して残りのdivの高さを拡張します(div min-heightを増やします)が、挿入後にコンテンツがクリアされると、次の図が表示されます。 削除されたテキスト

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

では、問題は、divの内容に応じてtdと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を呼び出した後でWebページに含める必要があります。

次に、次のようにスクリプトを呼び出します。

$(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内の他のすべての要素に割り当てることができます。

FIDDLEUPDATEAGAIN。こちらを確認してください:

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

于 2012-08-17T10:13:05.710 に答える