菜单拟合窗口大小

Question

我的菜单有问题： 我有一个960px的div，它有一个背景（图像2）。在图像2的左侧，需要另一个带有fitt左侧空间的元素，右侧是需要适合右侧空间的div。

所以，如果我的分辨率为1024px，则左边需要32px，中心（永远）960px和右边32px。如果分辨率为2048px，则为：544px，center：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

所有图片都是透明的。

谢谢！

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/