设置动态边距答案

【问题标题】：Setting a dynamic margin设置动态边距
【发布时间】：2011-06-15 23:44:25
【问题描述】：

所以我在设置一个动态减小和增加到最小 8 像素和最大 40 像素的边距时遇到了这个问题。

在容器内的 11 个不同块之间设置边距。容器的最小宽度可以是 960 像素，也可以是最大 1280 像素，并且始终具有固定高度。

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

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

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

正如你从图片中看到的那样，我想要做的就是在分辨率改变时将盒子分开。

我目前使用 jQuery 有类似的东西

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

我被困在我应该如何计算这个问题上，以及这是否是正确的方法：/

我目前所拥有的一个例子：http://jsfiddle.net/m4rGp/

【问题讨论】：

标签： javascript jquery

【解决方案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

【讨论】：

谢谢你，它有效，但在我的网站上，我使用的另一个百分比设置会导致问题，因此，在我的情况下，它不可靠。我提供了一个在 jsFiddle 中工作的链接以供将来参考 - jsfiddle.net/m4rGp/1 谢谢

【解决方案2】：

我不会用 javascript 来做这件事。工作量很大

您可以制作一个表格，其中包含设置为所需宽度的单元格。

http://jsfiddle.net/HZKpM/

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

【讨论】：

谢谢，它完成了工作，但我不确定表格的使用：/我认为这是他们在网页设计中“避免使用布局”的方法......除非在这种情况下使用表格能够克服所需的 JavaScript 工作量/复杂性，否则您怎么看？

【解决方案3】：

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

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

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

【讨论】：

非常有趣，但是我需要我的盒子宽度为 80 像素，并且它们开始和结束于容器的边缘（例如，在你的 jsFiddle 中，我需要在开始或结束）你知道这在 CSS 中是否可行？非常感谢！
你知道 CSS 吗？ B/c 宽度和颜色直接写在那里，没什么特别的。只需将其更改为width:80px 并删除背景样式即可。更新：jsfiddle.net/HZKpM/5
啊哈哈抱歉评论不是很清楚！我想说的是，在我的容器内，两个端盒都必须靠在容器的边缘。例如，jsfiddle.net/HZKpM/7 你可以在容器的末端看到橙色）有没有办法让最右边和最左边的盒子靠在容器的边缘，同时在其他盒子之间仍然留有空间。