0

高さが固定された DIV があるとします。が定義されていないwidth場合、コンテンツは 100% の幅に広がります。DIV を埋めるために幅を調整する方法。間違いなくCSSでは不可能なので、Javascriptで解決策を探しています。

この例では、テキストは 100% の幅に広がり、固定高さの空きスペースがたくさん残されています。コンテンツを DIV 全体に合わせるには、javascript で 130px の幅を設定する必要があります。しかし、幅を計算する方法は？

注:この値 (130 ピクセル) は、サンプル テキストの推定値です。DIV コンテンツに応じて、javascript は DIV 内にコンテンツを収めるのに必要な幅を計算する必要があります。

DIV コンテンツの 2D サイズを推定する方法はありますか?

CSS は実際にこれを高さに対して行います。幅が固定されている場合、DIV を埋めるために高さが続きます。幅もそうすることができますか？

明確化：幅を知らずにDIVを垂直に埋める方法（高さは固定されています）？

4

2 に答える 2

2

要件を正しく理解していれば、Javascriptを使用してこれを行うことができます。

<div>秘訣は、ブラウザにコンテンツを特定の幅に流し、どの高さになるかを確認するヘルパーを使用することです。ヘルパーの高さが<div>アウターの高さよりも高い場合は<div>、幅を調整して補正します。

一方、アウター<div>にはoverflow: hidden、これらの流れるような実験がすべて、ページレイアウトに不快な変更を加えないようになっています。

実際の動作をご覧ください。

于 2012-06-20T22:43:21.410 に答える
1

これは代替アプローチです。効率は劣りますが、他の回答よりも正確かもしれません。

ここで例を参照してください：

基本的に、目的の高さに達するまで幅をループダウンします

<div id="AA">
    <div id='A'>
        I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i need to be
    </div>
</div>

CSS: 

#AA {
    height: 300px;
    border: 1px solid black;
    width: 100%;
}

#A {
   display: inline;
}

スクリプト：

    height = $('#AA').height();
minWidth = 300;

currentWidth = $('#A').width();
currentHeight = $('#A').height();
stop = false;

if (currentWidth >= minWidth) {

    while (stop === false) {
        if (currentWidth >= minWidth) {
            newWidth = currentWidth - 1;
            $('#AA').width(newWidth);
            currentHeight = $('#A').height();
            currentWidth = $('#A').width();
            if (currentHeight < height) {
                stop = false;
            }
            else {
                stop = true;
            }
        }
        else {
            stop = true;
        }
    }
}
于 2012-06-21T00:33:05.080 に答える