Jquery事件捕获在margin-left中的变化

Question

我有一个情况在这里我有一个div是边缘：自动让它居中。

这工作正常，但是当我调整窗口大小时，我希望它在到达某个边距时停止居中。

意思是我左边有一个浮动物体，我不希望它重叠。

有人建议吗？

谢谢

编辑 ：代码添加

<nav id="servicos_nav">
    <div id="full">
        ...
    </div>
    <div id="minimized">
        ...
    </div>
</nav>
<section id="content">
… PHP generated code …
</section>

导航是绝对的，因为它是一些效果，变形最小化动画。

截面内容为宽度为860px和margin auto。 但导航中的元素和元素始终为140px宽度，我不希望最小化窗口导致内容与该元素重叠。

SolutionEdit ：我的解决方案基于awnser（静态宽度更容易:-)）：

window.onresize = function(event) {
        if(window.innerWidth <= 1142)
        {
            $("#content").css("margin-left","140px");
        }
        else
        {
            $("#content").removeAttr("style");
        }
    };

Answer 1

你可能不得不从事数学工作，因为这不是我的强项，但这样的事情应该有效

var contentWidth = $('#content').width();
var leftWidth = $('#left').width();

$(window).resize = function(event) {
    var windowWidth = window.innerWidth;
    if (windowWidth <= (contentWidth + (leftWidth * 2)) {
        $('#content').css('margin-left', leftWidth);
    } else {
        $('#content').css('margin-left', 'auto')
    }
}

演示

编辑：更改为使用jQuery .resize而不是覆盖onresize

Answer 2

您可以使用#content的偏移量。

$(window).resize = function(event) {
   if ($('#content').offset().left < leftWidth) {
     $('#content').css('margin-left', leftWidth);
   } else {
     $('#content').css('margin-left', 'auto')
   }
}

Answer 3

具有边距0px auto的元素没有可访问的边距。 这意味着具有保证金的元素：0px auto将具有margin-left和margin-right等于0。

解决方案在于CSS，而不是在Javascript中。 你可以，并且应该重新考虑你的布局。 在这里， 这是一种使用css min width 进行此操作的方法 。