1

我正在尝试通过获取视口宽度来动态设置 id:main 的边距。我在页面中有许多相同宽度的块。因此，我想通过动态计算剩余宽度来适应尽可能多的块并使其居中。块大小为 240px，填充为 20px

我已经尝试了两个代码，我被困了一段时间。

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');

因为目前你没有选择任何东西。您需要将选择器放在引号中。

我也不明白为什么你对同一个元素使用 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;

第二行将覆盖第一行。这是一个错字还是你想在这里做些什么？

于 2012-10-25T16:55:17.047 回答