设置动态保证金

所以我有这个问题，设置一个动态减少的余量，并增加到最小8px和最大40px。

边距设置在容器内的11个不同块之间。 容器的最小宽度为960px或最大为1280px，并且总是具有固定的高度。

我怎样才能使盒子之间的空间（左边缘）始终伸展以正确填充容器？

下面是我的目标是960px宽度的图像

现在是它的全宽1280像素的图像

从图像中可以看出，所有我想要做的就是在分辨率改变时将盒子分开。

我目前使用jQuery有这样的东西

$(window).bind('resize', function(){ var barWidth = $(".topBar").width(); $(".barModules li").css('margin-left', my dynamic value here)); }); 

我不知道如何计算这个，如果这是正确的方法：/

我到目前为止的一个例子： http ： //jsfiddle.net/m4rGp/

Answer 1

我不会用javascript做到这一点。 它做了很多工作

您可以创建一个包含设置为所需宽度的单元格的表格。

http://jsfiddle.net/HZKpM/

您甚至可以在不同的地方添加minwidth 。

Answer 2

如果…

 n = number of LI elements in .barModules 

然后…

 dynamic margin = (barWidth - n * (width of one LI)) / (n - 1) 

所以你的代码看起来像：

 $(window).bind('resize', function(){ var n = $(".barModules li").length; var barWidth = $(".topBar").width(); var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead... var dynMargin = (barWidth - n * liWidth) / (n - 1) $(".barModules li").css('margin-right', dynMargin + "px")); // "margin-right" instead of "margin-left" $(".barModules li:last").css('margin-right', '0px'); // don't need margin on last element. }); // if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com 

Answer 3

我建议使用CSS。 只需在每个盒子周围创建一个外盒。

 
text 

这是一个jsfidle http://jsfiddle.net/HZKpM/3/