Question

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

[角落-1] [变量] [装饰品] [变量] [角落-R]

“可变”垫片部分应该可以调整大小，但最终，周围的容器（包含所有这些）应该决定最大宽度，并且上述设置应该平均拉伸两个垫片（无需说明间隔物的明确宽度），将“装饰”留在中心。

所有部件的高度均为260像素。所有这些div都包含图像作为背景图像。 “变量”部分包含1px宽的条形光纤（同样，作为背景图像，具有repeat-x设置）。

我可以这样做，也许支持主流浏览器吗？最好的方法是什么？

Answer 1

我可以这样做，也许可以支持主流浏览器？

我的答案适用于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>

Answer 2

This会将装饰品保留在页面的中心位置。宽度将由标题导航宽度

决定

Answer 3

看到这个

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

您可以在.vary中更改宽度，然后参阅

是你想要的吗？

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

3 个答案:

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