菜单拟合窗口大小

Question

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

所以，如果我有一个1024像素的分辨率，左边需要有32px，中心（永远）960px和右边32px。如果分辨率为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> 

见图像：

UPDATE：

图像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/