如何让divs填充剩余空间？

Question

我知道有类似的问题，但我找不到要做什么。 这是一张图片，显示我想要做什么。

http://s7.postimg.org/6wkq6376j/Question.jpg

可以在一个div容器3周的div是一个很好的选择吗？我想将横幅和导航栏放在中心，大小与所示相同。

如何填充剩余空间，使其看起来像我的导航栏是100％宽度？

*（我试过100％，导航栏的按钮变得太大了）。

Answer 1

如果我理解正确.. 1）把它们放在一个全宽的包装div中。 2）然后给横幅和导航自己设置宽度和“边距：0自动;”把它漂浮在中心。 3）然后，您可以在导航包装上设置BG图像以匹配导航栏，因此它一直延伸，但导航栏保持固定宽度并居中。

类似下面，这里是一个小提琴更容易看到它：http://jsfiddle.net/s_Oaten/GTDBX/

HTML

<div class="header_wrap"> 
    <div class="banner"></div> 
    <div class="nav_wrap"> 
    <div class="nav"> 
     <ul><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li></ul> 
    </div> 
    </div> 

CSS

.header_wrap { 
    height: 110px; 
    margin: o auto; 
    background: #0000dd; 
} 
.nav_wrap { 
    height: 80px; 
    margin: o auto; 
    background: #707070; 
} 
.banner { 
    height:110px; 
    background: blue; 
    margin: 0 auto; 
    width: 600px; 
} 
.nav { 
    height: 80px; 
    background: grey; 
    margin: 0 auto; 
    width: 600px; 
} 
ul {margin: 0; padding: 0;} 
.nav li { 
    display: block; 
    float: left; 
    width: 20%; 
    list-style: none; 
    text-align: center; 
}