html - 试图在一个 div 容器中放置两个 div

Question

我试图在一个容器中放置两个 div，但它们的位置真的很奇怪。

<div id="headernav">
                <div id="logo"></div>
                <nav id="navbar"></nav>
 </div>

我希望导航是一个特定的宽度，比如 700px，徽标 div 适合剩余空间，所以我把它放在 100%

#headernav{
    background:#0000FF;
    height: 60px;
}
#logo{
    height:100%;
    width: 100%;
    background:red;
    height:100%;
}
#navbar{
    width:700px;
    height:100%;
    background: cyan;
}

Answer 1

尝试calc(100% - 700px);徽标width

https://developer.mozilla.org/en-US/docs/CSS/calc

看看这个。在铬中工作正常。

http://jsfiddle.net/btevfik/W5stS/

Answer 2

使用cal(100% - 700px);in #logo，然后使用 anddisplay: inline-block来显示两列，代码可能是这样的：

款式：

#headernav{
        background:#0000FF;
        height: 60px;
        font-size: 0; //this added
    }

    //New properties added
    #logo,#navbar{
        display: inline-block;
        vertical-align: top;
    }

    #logo{
        font-size: 1rem; //this added
        width: calc(100% - 700px); //this added

        background:red;
        height: 60px;
    }
    #navbar{
        font-size: 1rem; //this added

        width:700px;
        height: 60px;
        background: cyan;
    }

Answer 3

您可以使用display: table-cellandtable和table-layout: fixed在同一行中设置 2 个具有相同高度的块，一个具有固定宽度，另一个占据父级的剩余宽度。

工作小提琴： http: //jsfiddle.net/TpFjD/兼容性：IE8+（如果你支持 IE7 和 IE6
，你必须使用相同的后备）inline-block

<div id="headernav">
    <div id="logo"> A </div>
    <nav id="navbar"> B </nav>
</div>

/\

#headernav {
    display: table;
    width: 100%;
    background:#0000FF;
    height: 60px;
}
#logo {
    display: table-cell;
    background:red;
}
#navbar {
    display: table-cell;
    width: 700px;
    background: cyan;
}

如果固定宽度在第一个块上，您可以将其浮动（向右或向左）并overflow: hidden在第二个块上使用。甚至 IE6 也兼容此方法。