设置动态边距 [英] Setting a dynamic margin

问题描述

因此我遇到了一个问题，即设置动态减少和增加到最小8像素和最大40像素的边距.

So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.

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

The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.

如何使框之间的空间(左边距)始终伸展以正确填充容器?

How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?

下面是我要达到的960px宽度的图片

Below is an image of what I am aiming for at 960px width

现在以全宽1280px的形式显示图像

Now an an image of it at it's full width of 1280px

从图像中可以看到，所有我想做的就是随着分辨率的改变而将框分开.

As you can see from the images all im trying to do is separate the boxes as the resolution is changed.

我目前使用jQuery这样的东西

I currently have something like this using jQuery

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

我坚持应该如何计算它，如果那是正确的解决方法:/

I'm stuck on how I should be calculating this and if that's even the right way to go about it :/

我到目前为止的示例: http://jsfiddle.net/m4rGp/

An example of what I have so far: http://jsfiddle.net/m4rGp/

推荐答案

我不会使用javascript做到这一点.它的工作很多

I wouldn't do that with javascript. Its a lot of work

您可以使用设置为所需宽度的单元格制作表格.

You could make a table with cells that are set to the width you want.

http://jsfiddle.net/HZKpM/

您甚至可以在各个位置添加minwidth.

You can even add a minwidth in various places.

这篇关于设置动态边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！