Question

在我的网站上，我有一个侧面导航栏，你可以隐藏，我还有一个主要的中央div，它将包含一个工资单计算器。我希望这个div始终是水平集中的。但截至目前，它只是忽略了navbar，并且仅仅根据父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是向左浮动并且在导航栏中点击并停止并随之移动，如果我将其设置为向左浮动，则对于calc div也是如此，但我不明白为什么边距忽略它只是基于父母的位置。

Answer 1

浮动元素会突破其父级的定位流，因此#content会在计算边距时忽略它。

请参阅：http://fiddle.jshell.net/vz4srfe0/4/

需要注意的事项：

Main拥有财产clear:both
#navBar和#content拥有财产float: left
#content宽度计算为calc(100% - 85px)，因为navBar的宽度为85px

修改

视觉上的诡计使我认为上述工作 - 然而，它只会在导航打开时才会居中。不确定这是否可以仅使用CSS - 如何使用调整#content宽度的javascript添加类？ http://fiddle.jshell.net/vz4srfe0/6/

Answer 2

正如另一个答案所说：＆＃34;浮动元素会突破其父级的定位流，因此#content会在计算边距时忽略它。＆＃34;

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

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

为了给出一个例子，我添加了相对于计算器div的位置，并使用jQuery为calc 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

Answer 3

您必须使用div包装calc-box和Content-header，如下所示：

<div id="inner">
    <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>

然后你必须在你的CSS中向#inner添加一个margin-left作为默认值，它必须等于你的导航宽度：

#inner{
    margin-left: 85px;
}

最后你必须改变你的jQuery-Code，所以当你切换你的导航时它会改变左边距：

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
        $('#navBar').animate({width: "toggle"}, 200, 'swing', function(){
            $('#inner').css('margin-left', '0');
            state = true;
        });
    }
    else {
        $('#navBar').animate({width: "toggle"}, 200, 'swing', function(){
            $('#inner').css('margin-left', $('#navBar').css('width'));
            state = false;
        });
    }
});

见这里：http://fiddle.jshell.net/vz4srfe0/5/

在其剩余的水平空间中集中一个div。父母div

的 fiddle here shows entire thing:

的 HTML

的 CSS

3 个答案: