html - 菜单拟合窗口大小

Question

我的菜单有问题：我有一个 960 像素的 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/