html - 如何让 div 填充剩余空间？

Question

我知道有类似的问题，但我找不到确切的方法。这是一张显示我想做的图片。

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

容器 div 中的 3 个 div 是一个不错的选择吗？我想将横幅和导航栏保持在中心，如图所示。

我怎样才能填充剩余的空间，使我的导航栏看起来像 100% 宽度？

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

Answer 1

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

如下所示，这里有一个更容易看到它的小提琴：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;
}