html - 固定中心 div，由可变宽度 div 包围，由固定 Angular div 包围

Question

我想在页面中放置这样一个栏:

[ Angular -l][变量][装饰][变量][ Angular -r]

“可变”间隔部分应该可以调整大小，但最终，周围的容器(包含所有这些)应该规定最大宽度，并且上述设置应该平均拉伸(stretch)两个间隔(不必声明间隔器的明确宽度)，将“装饰品”留在中间。

所有部分的高度都完全相等，为 260 像素。所有这些 div 都包含图像作为背景图像。 “可变”部分包含 1px 宽的条形纤维(同样，作为背景图像，设置了 repeat-x)。

我可以做到这一点，并且可能支持主流浏览器吗？最好的方法是什么？

Answer 1

Can I do this, and perhaps support the major browsers?

我的答案适用于所有现代/主要浏览器，带有 exception of 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>