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

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

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

Answer 2

您可以使用display: table-cell和table以及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也与这种方法兼容。

Answer 3

在cal(100% - 700px);中使用#logo，然后在display: 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; }显示两列，代码可能是这样的：

样式：

{{1}}

试图在div容器中放入两个div

3 个答案: