响应式边距调整大小

Question

我想让我的元素平均调整其边距的大小，以便它们填充页面。我尝试使用 jquery 将页面宽度转换为值，但这不起作用。

var margen = $(window).width()
$(document).ready(function () {
    $('#FixedMenu *').animate({
        'margin-left': 'margen/6'
    });
});

http://jsfiddle.net/clarinetking/2PGZS/40/

Answer 1

我对你的jsFiddle做了很少的更新，你可以在这里看到它：

js小提琴

我改变的是这样的：

1.

您找到的屏幕宽度：

var screenWidth = $(window).width();

阿拉伯数字。

您找到了固定菜单的子元素的总宽度

var widthOfChilds = 0;
$('#FixedMenu > *').each(function() {
    widthOfChilds += $(this).outerWidth( true );
});

3.

您从屏幕尺寸中删除子元素的总宽度，您将获得子元素周围的"自由"宽度。其中有六个，但是从右到最后一个之后需要空格，所以您将"free"宽度除以子级数+ 1

var newmargin = (screenWidth - widthOfChilds)/7;
$('#FixedMenu *').animate({
    'margin-left': newmargin
});

我希望它有所帮助！ :)