设置动态保证金

Question

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

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

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

以下是我的目标是960像素宽度的图像

现在是它的全宽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

如果...

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 2

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

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

http://jsfiddle.net/HZKpM/

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

Answer 3

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

<div class="outer"><div class="inner">text</div></div>

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