Question

我试图通过获取视口宽度来动态设置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');

Answer 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;

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

通过获取视口宽度动态设置html主体的边距

1 个答案:

短版

长版