0

可変量のテキストと固定高さを含む div があります。幅が固定されていない場合、幅は自動的に 100% になります。div に必要な幅を見積もることはできましたが、テキストが常に同じであるとは限らないため、これが常に機能するとは限りません。毎回自動的に決定する必要があります。基本的にはdivの幅をコンテンツで決めたい。

簡単に言えば、私のdivは次のようになります

#a {
height:100px;
width:?;
}

これらを考慮してください：http://jsfiddle.net/ZE4Sy/2/

これが基本的に私の目標です (ただし、幅を見積もってこれを行いました)。各 div の高さは固定されていますが、テキストの量は異なります。テキストが高さを超え始める前に、幅をできるだけ小さくしました。

私はjquery/javascriptの非常に基本的な知識しか持っていませんが、これに対する解決策があれば、それらが含まれる可能性があると思います.

ご協力ありがとうございました！

4

2 に答える 2

0

ここ：

$('.box').each(function () { 
    var $box = $(this),
        width = $box.width(),
        $inner = $box.wrapInner('<div></div>').children().first();

    while (width > 0 && $inner.height() < $box.height()) $box.width(--width);  
    $box.width(++width);
});

ライブデモ: http://jsfiddle.net/ZE4Sy/6/

于 2013-05-31T22:29:30.687 に答える
0

私は同様の問題を抱えていましたが、私の場合、Šime Vidasのソリューションが機能しない2つの要因がありました.1つは、divのコンテンツにHTML（マージンのあるpタグなど）が含まれていたことと、divを外側に突き出したかったことです。必要に応じて、含まれる div の使用可能な幅。インスピレーションを得るための彼のソリューションを使用して、私はこれを思いつきました：

$('.box').each(function () { 
    $box = $(this);
    $inner = $box.wrapInner('<div></div>');
    while ($inner[0].scrollHeight > $box.height()) $box.width($box.width()+100);  
});

これは、内側の div の高さが含まれている div を超えなくなるまで、ボックスを少し広げ続けます。処理時間を犠牲にして、+100 の数字を減らしてより正確な幅を得ることができます。

于 2014-01-14T18:15:41.910 に答える