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

我想在页面中放置一个如下所示的栏：

[转角-l][variable][endorry][variable][corner-r]

“可变”垫片零件应可调整大小，但最终，周围容器（包含所有这些）应规定最大宽度，上述设置应均匀拉伸两个垫片（无需说明垫片的明确宽度），将“装饰”留在中心

所有零件的高度完全相等，为260像素。所有这些div都包含作为背景图像的图像。“可变”部分包含一根1px宽的光纤（同样，作为背景图像，设置了repeat-x）

我能做到这一点吗，也许还能支持主流浏览器？最好的方法是什么？

看到这个了吗

您可以在

中更改宽度。更改
并查看

是你想要的吗？
将在页面中央保留装饰。宽度将由标题导航宽度决定

我是否可以这样做，或者支持
主要浏览器

我的答案将适用于所有现代/主流浏览器，并带有。我不确定你是否认为这是一个主要的浏览器；现在已经是边缘了

请参见：（并调整浏览器大小以测试流动性）

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
}

<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>

HTML:

.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
}

<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>


1.
2.
3.
4.
5.
我不想说明不同零件的宽度。它们应该自动扩展以填满剩余的空间，均匀地分布在装饰物的左侧和右侧。我说你可以检查以更改
vary
的宽度，并查看所有宽度。这不值得吗？我根本不知道用户浏览器窗口的宽度。它应该是自动安装的，即完全没有“宽度”属性。它不…在IE8、FF和Chrome中测试。太好了，谢谢！IE7不被认为是我们的“主要”浏览器。