1

ビューポートの幅を取得して、id：mainのマージンを動的に設定しようとしています。ページに同じ幅のブロックが多数あります。したがって、できるだけ多くのブロックをフィットさせ、残りの幅を動的に計算してそれらを中央に配置したいと思います。ブロックのサイズは240ピクセル、パディングは20ピクセルです。

私は2つのコードを試しましたが、しばらくこれで立ち往生しています。

var width=$(window).width()
var stickies=Math.floor(width/240);  //* calculate how many can fit in a row
var mrg=(width-(stickies*240)-20);//*calculating remaining width 
var mrg=(width-(stickies*240)-20)/2;
var el1=$('#main');
var el2=$('#main');
el1.css('margin-left',mrg+'px');
el2.css('margin-right',mrg+'px'); 



var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')     [0],x=w.innerWidth||e.clientWidth||g.clientWidth;
var stickies=Math.floor(var x/240);
var mrg=(var x-(var stickies*240)-20)/2;
var el1=$('#main');
var el2=$('#main');
el1.css('margin-left',mrg+'px');
el2.css('margin-right',mrg+'px');
4

1 に答える 1

1

短縮版

あなたはそれらの線に沿って何かが必要なはずです

var width=$(window).width();
var stickies=Math.floor(width/240);  //* calculate how many can fit in a row
var mrg=(width-(stickies*240)-20)/2; //*calculating remaining width 
$('#main').css({'margin-left': mrg+'px', 'margin-right': mrg+'px'});

ロングバージョン

あなたのコードは多くの修正が必要です。

var el1=$(#main);

に変更する必要があります

var el1=$('#main');

現時点では、uは何も選択していないためです。セレクターは引用符で囲む必要があります。

また、なぜuが同じ要素に2つの変数を使用しているのか理解できません。あなたは次のようなことをすることができます

$('#main').css({'margin-left': mrg+'px', 'margin-right': mrg+'px'});

またはそれらの線に沿った何か。

ついに、

var mrg=(width-(stickies*240)-20);//*calculating remaining width 
var mrg=(width-(stickies*240)-20)/2;

2行目は1行目を上書きします。これはタイプミスですか、それともここで何かをしようとしていますか？

于 2012-10-25T16:55:17.047 に答える