Question

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

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

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

有人提出建议吗？

由于

编辑：代码已添加

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

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

截面内容宽度为860px，自动保证金。但导航中的元素和元素始终为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')
    }
}

demo

编辑更改为使用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中。你可以，并且应该重新考虑你的布局。在这里，this is a way of doing it与css min width。

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

3 个答案: