html - 3 列レイアウトのパーセントとピクセルの混合

Question

重複の可能性:
3 列レイアウト サイド コラム エラスティック ミドル 固定

画面幅の 90% のラッパーを使用して Web ページを作成しています。ラッパーには 3 つの列があります。

• ラッパーは画面サイズの 90% の幅です。
• 真ん中の列は500PX
• 左の列は、中央の列の後の残りのスペースの 60% です。
• 右の列は、中央の列の後の残りのスペースの 40% です。

左右の列を正しい幅に設定する方法に問題があります。これを解決するスマートな方法を知っている人はいますか。

Answer 1

これは JavaScript から実行できます。最初に、トップ div の高さを px 単位で取得する必要があります。

var top = $('#top').width();

この後、その幅と、下から中央の div を持つ 500px との差を計算する必要があります。

var sum = top - 500;

この後、左右の下部の div + マージンの幅を計算する必要があります (私は 10px に設定しました):

var left = (sum * 60)/100 - 10;
var right = (sum * 40)/100 - 10;

最後に、2 つの div に幅を適用する必要があります。

$('#left').width(left);
$('#right').width(right);

ここで作成した例を確認できます: http://jsfiddle.net/paulalexandru21/LceLw/1/

PS。レイアウトがよく見えない場合は、ドラッグする必要があります。3 つの列すべてが希望どおりに表示されます。