html - 菜单适合窗口大小

Question

我的菜单有问题:我有一个 960px 的 div，它有一个背景(图 2)。在图 2 的左侧，需要另一个适合左侧空间的元素，右侧是一个需要适合右侧空间的 div。

因此，如果我的分辨率为 1024 像素，则左侧需要 32 像素，中心(永远)960 像素，右侧 32 像素。如果分辨率为2048px，左:544px，中:960px，右:544px。

<div id="container-menu">
    <div id="left-bg">// EMPTY, ONLY NEED TO FIT THE WINDOW LEFT //</div>
    <div id="center-bg">// HERE GO MENU AND LOGO //</div>
    <div id="right-bg">// EMPTY, ONLY NEED TO FIT THE WINDOW RIGHT//</div>
</div>

见图片:

更新:

图片 1 和图片 3 的宽度为 1px，背景中添加了 repeat-x

图片 2 的宽度为 960px

所有图片都是透明png。

谢谢!

Answer 1

为此，您可以使用 CSS3 Flex 属性。

例如:

HTML

<div class="parent">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>​

CSS

.parent {
    display: -moz-box;
    -moz-box-orient: horizontal;
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    width: 100%;
}

.parent div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height:40px;
}
.parent .middle{
    width:460px;
    background:yellow;
}
.left{background:red;}
.right{background:blue;}

检查这个http://jsfiddle.net/pMh97/1/