固定中心DIV，被可变宽度DIV包围，被固定角落DIV包围。

Question

我想在页面中定位一个类似于这样的栏：

[角落-l][可变部分][装饰][可变部分][角落-r]

"可变部分"应该是可调整大小的，但最终，包含所有内容的周围容器应该决定最大宽度，并且上述设置应该等比拉伸两个可变部分（无需为可变部分指定显式宽度），将"装饰"置于中心。

所有部分的高度都完全相同，为260像素。所有这些div都包含图像作为background-image。"可变部分"包含栏的1像素宽纤维（同样作为background-image，设置了repeat-x）。

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

- CONTRACT SAYS I'M RIGHT

Answer 1

我能做到这个，也许还能支持主流浏览器吗？

我的答案可以在所有现代/主流浏览器中运行，但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>

- thirtydot

---

谢谢！对我们来说，IE7不被视为“主要”浏览器。 - CONTRACT SAYS I'M RIGHT

Answer 2

这个代码将会让装饰物保持在页面中央。宽度将由页眉导航的宽度决定。

- SwDevMan81

---

它不会...在IE8、FF和Chrome中进行了测试。 - anothershrubery

Answer 3

看这个

http://jsfiddle.net/7MnKj/1/

你可以在.vary中更改宽度并查看

这是你想要的吗？

- xkeshav

---

我不想为不同的部分指定宽度。它们应该自动扩展以填满剩余的空间，均匀地分布在装饰物左右两侧。 - CONTRACT SAYS I'M RIGHT

我说你可以检查更改vary的宽度并查看所有宽度。这不值得吗？ - xkeshav

我完全不知道用户浏览器窗口的宽度。它应该自动适应，即根本不需要“width”属性。 - CONTRACT SAYS I'M RIGHT