5

#left、#center、#right の 3 つの div を、特定の幅 (300px など) を持つ同じ行に配置したいと考えています。

#left と #right にはコンテンツがほとんどなく、それぞれ 50px と言って、完全に表示しています。

#center には 400px などの多くのコンテンツがあり、行の残りのスペース内にできるだけ多く表示したいと考えています。このため、#inner 内に #center のコンテンツを含めました。

#left と #center を左に、#right を右にフロートさせました。

<div id="left">
    LEFT
</div>
<div id="center">
    <div id="inner">
        LONG CONTENT ...
    </div>
</div>
<div id="right">
    RIGHT
</div>

フィドルの例

質問 1: CSS を介して #center div がライン上の利用可能な残りのスペースをすべて占めるようにする方法はありますか? #左と #右、それぞれ 50px) ?

質問 2: CSS による解決策が見つからず、jQuery を使用して残りの使用可能なスペースを動的に計算しました。これは、IE9 を除くすべてのブラウザーで問題なく動作します。

IE9 の問題は、サブピクセルの精度があり、jQuery が要素の次元に対して整数値しか返さないことです。

例を次に示します。IE9 は #left を 50.5 ピクセルの幅と見なしますが、jQuery は 50 ピクセルと見なします。この違いにより、IE9 ではレイアウトが崩れます。

JavaScript を使用して使用可能なスペースを計算する必要がある場合、この IE9 の問題を解決するにはどうすればよいですか?

4

3 に答える 3

1

今後の参考のために、私が行ったことは、IE9 が float として認識する幅を、jQuery が整数として認識する値に強制することでした。

var elem = $("#element");
elem.css("width", elem.width());

#element の値が IE9 で 50.5px と認識される場合、jQuery は、jQuery が認識する 50px の値を強制します。

于 2012-05-07T06:36:14.183 に答える
0

これを試して:

main = $("#main").width();
centerWidth = main - ( $("#left").width() + $("#right").width() );
$("#center").width(centerWidth);

また:

main = parseFloat(document.getElementById("main").style.width)
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width));
document.getElementById("center").style.width = centerWidth + "px"
于 2012-05-06T15:59:52.460 に答える