0

画面が過度に縮小されてコンテンツがこぼれる場合、div コンテナー (ここではそれぞれ「div.cell」) の高さを増やすサイズ変更機能を作成しようとしています。各 div.cell には、さまざまな p がたくさんあります。ここでは2つだけです。

    <div class="cell panel">
        <img src="stills/press/press-logo-c2e2.png" class="general"><p class="one">Panelist - Chicago Comic & Entertainment Expo</p>
        <p class="two">[Panel Name Here]</p>
        <p class="three"><b>Panel Date/Location:</b> [Time]PM on April 26-28, 2013 at C2E2 (Chicago, Illinois)</p>
        <p class="three"><b>Panelists:</b> [Panelists]</p>
        <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p>
    </div>

    <div class="cell panel">
        <img src="stills/press/press-logo-wondercon-anaheim.png" class="general"><p class="one">Panelist - WonderCon</p>
        <p class="two">[Panel Name Here]</p>
        <p class="three"><b>Panel Date/Location:</b> [Time]PM on March 29-31, 2013 at WonderCon (Anaheim, California)</p>
        <p class="three"><b>Panelists:</b> [Panelists]</p>
        <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p>
    </div>

非常に初歩的で非常に間違ったjqueryでは、次のようにネストしてこれを行うことを望んでいました。

var pheight = 0;
var divheight = 0;
var biggest = 0;
$("div.cell").each(function (){
    divheight=$(this).height();
    pheight = 0;
    $("p").each(function (){
        pheight += $(this).height();
    });
    biggest = divheight;
    if (pheight > biggest) { biggest = pheight };
    $(this).css("height",biggest);
})

これは機能しません:)各div.cellをそのpの累積高さ(およびバッファ)に変更する方法を誰もが知っています

4

3 に答える 3

0

あなたの要件に基づいて、これが役立つかもしれません：

var pheight = 0;
var divheight = 0;
var biggest = 0;
$("div.cell").each(function () {
    divheight = $(this).height();
    pheight = 0;
    $(this).children("p").each(function () {
        pheight += $(this).height();
    });
    biggest = divheight;
    if (pheight > biggest) {
        biggest = pheight;
    }
    $(this).css("height", biggest);
});

ここで確認してください：http://jsfiddle.net/RLWqV/

于 2013-01-30T02:47:08.747 に答える
0

これを試してください：

$(window).resize(function(){
    //your script here
});

関数をウィンドウのサイズ変更イベントにバインドしますが、関数が正しく機能するとは思いません。高さを増やすだけで、減らすことはありません。ps: 申し訳ありませんが、コメントを投稿できません。

于 2013-01-30T02:22:10.937 に答える
0

あなたが何を望んでいるのか正確にはわかりません。ただし、次のコードを試してみてください。

var pheight = 0;
var divheight = 0;
var biggest = 0;
$(window).resize(function () {
    $("div.cell").each(function () {
        //divheight=$(this).height();
        pheight = 0;
        $(this).find("p,img").each(function () {
            pheight += $(this).height();
        });
        biggest = pheight;
        //if (pheight > biggest) { biggest = pheight };
        $(this).css("height", biggest);
    });
});

ここにjsfiddleがあります。http://jsfiddle.net/agAm8/

于 2013-01-30T02:35:44.517 に答える