菜單擬合窗口大小

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/