jquery - 将 div 集中在其父 div 的剩余水平空间中

Question

在我的网站上，我有一个可以隐藏的侧面导航栏，我还有一个主要的中央 div，其中包含工资计算器。我希望这个 div 始终水平居中。但到目前为止，它忽略了导航栏并仅将其位置基于父 div。

<强> fiddle here shows entire thing:

我猜一旦它的行为正确集中，它就会在侧栏隐藏时进行调整。

这是页面结构的 html:

HTML

<div id="Main">


        <div id="content">

            <div id="navBar">
                <div class="navBtn navBtnText">
                    Calculator
                </div>
                <div class="navBtn navBtnText">
                    About
                </div>
                <div class="navBtn navBtnText">
                    Services
                </div>
            </div>

        <div id="Content-header">
            <div id="navBar-control">
                <a href="#" id="toggle-slide-button">
                    <img src="Images/menu_default.png" onmouseover="this.src='Images/menu_hoverr.png'" onmouseout="this.src='Images/menu_default.png'" />
                </a>
            </div>
            <div>
                <span>Calculator</span>
            </div>
        </div>

        <div id="calc-box">
        </div>

        </div>


    </div>

CSS

#Main { 
    width: 1164px;
    height: 1000px;
    margin: 0 auto;
    border: 0px;

    background-color: white;
} 
}

 #navBar{   
    background-color: #660000;
    height: 100%;
    width: 85px;
    float: left;
}


#logo{
    width: 132px;
    height: 60px;

    background-image: url(Images/ADPHeaderLogo.png);
    background-size: contain;
}

.navBtn{    
    color: white;
    width: 100%;
    height: 70px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.2);
    opacity: 1;

    font-size: 12px;
    text-align: center;
}

.navBtnText {
    line-height: 120px;
    vertical-align: bottom;
}

.navBtn:hover{
   background-color:#990000;
}

#navBar-control {
    margin-top: 5px;
    width: 25px;
    height: 25px;
    padding: 0 15px;
    float: left;
}

#content {
    height: 100%;
    width: auto;
}

#Content-header {
    padding-top: 15px;
    width: auto;
}

#calc-box {
    margin: 0 auto;
    margin-top: 15px;
    background-color: #CCCCCC;
    height: 500px;
    width: 50%;
    box-shadow: 10px 10px 5px #888888;
}

内容 div 中的另一个 div 向左浮动，点击并停止在导航栏上并随之移动，如果我将其设置为向左浮动，则计算 div 也是如此，但我不明白为什么边距会被忽略它的位置仅基于父级。

Answer 1

正如另一个答案所说:“ float 元素脱离了其父元素的定位流程，因此 #content 在计算边距时会忽略它。”

因此，为了在侧边栏处于事件状态时设置计算器 div 的精确边距，请获取侧边栏宽度的一半，并将该值设置为计算器 div 向左的偏移量。

var real_mar = $('#navBar').width() / 2;
real_mar = real_mar + "px";

为了举例，我添加了相对于计算器 div 的位置，并使用 jQuery 添加/删除了计算器 div 的 left 属性的值

#calc-box {
position: relative;
}

$("#toggle-slide-button").click(function () {
    if (!state) {
        $('#navBar').animate({width: "toggle"}, 200);
        $('#calc-box').css({"left":"0px"}); // remove the offset
          state = true;
        }
    else {
        $('#navBar').animate({width: "toggle"}, 200);
        $('#calc-box').css({"left":real_mar}); // add the offset
        state = false;
        }
});

<强> UPDATED FIDDLE