固定中心div，由可变宽度div包围，由固定角div包围

问题描述

| 我想在页面上放置如下所示的栏： [corner-l] [变量] [装饰品] [variable] [corner-r] \“可变\”间隔部件应可调整大小，但最终，周围的容器（包含所有容器）应规定最大宽度，并且上述设置应将两个间隔均等地拉伸（而不必声明显式宽度）垫片），将“装饰品”留在中间。 所有部分的高度完全相等，均为260像素。所有这些div都包含该图像作为背景图像。 \“ variable \”部分包含一条1px宽的条形纤维（同样，作为背景图像，设置了repeat-x）。 我可以这样做，也许支持主要的浏览器吗？最好的方法是什么？     

解决方法

  我可以这样做，也许可以支持   主要浏览器？ 我的答案将适用于所有现代/主流浏览器，但IE7除外。我不确定您是否会考虑使用主流浏览器；如今这是边界。 请参阅：http：//jsfiddle.net/PyTAD/（并调整浏览器的大小以测试流动性） CSS：

.barContainer {
    border: 2px dashed #000;
    width: 100%;
    display: table;
    table-layout: fixed
}
.barContainer > div {
    outline: 1px dashed #00f;
    display: table-cell;
    height: 260px
}
.corner-l,.corner-r {
    width: 50px;
    background: #ccc
}
.variable {
    background: #999
}
.ornament {
    background: #f0f;
    width: 100px
}

HTML：

<div class=\"barContainer\">
    <div class=\"corner-l\">1</div>
    <div class=\"variable\">2</div>
    <div class=\"ornament\">3</div>
    <div class=\"variable\">4</div>
    <div class=\"corner-r\">5</div>
</div>

    ,这会将装饰物保留在页面的中央。宽度将由标题导航宽度决定     ,看到这个 http://jsfiddle.net/7MnKj/1/ 您可以在

.vary

中更改宽度并查看 那是你想要的吗？