试图在div容器内安装两个div

Question

我试图在容器内部安装两个div，但它们的位置真的很奇怪。

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

我想的资产净值为特定宽度像700像素和标识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

可以使用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; 
    }