CSS 三列标题

Question

我遇到以下与三列标题相关的问题。

我需要中间列的宽度为 960px 并居中。当文档宽度高于960px时，其他div列会出现，其宽度将取决于超出的宽度。

这是一张图片

标题的侧边 block 将在右侧包含背景颜色，在左侧包含重复 x 的图像。

编辑:它应该兼容 IE9/8/7。

http://jsfiddle.net/j6ReH/1/

<div class="wrapper">
    <div class="left"></div>
    <div class="central"></div>
    <div class="right"></div>
</div>

.wrapper {
    width:100%;
    height:50px;
}
.central {
    width:960px;
    height:50px
    margin:0 auto;
    float:none;
    background-color:#CCCCCC;
}
.left {
    width:auto;
    height:50px
    float:none;
    background-color:#ABC123;
}
.right {
    width:auto;
    height:50px
    float:none;
    background-color:#123456;
}

Answer 1

只需将 display: table; 应用于 wrapper 并将 display: table-cell; 应用于子项。

演示:http://jsfiddle.net/j6ReH/2/

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="central"></div>
    <div class="right"></div>
</div>

CSS

.wrapper {
    width:100%;
    height:50px;
    display: table;
}
.central {
    width:360px;
    height:50px;
    background-color:#CCCCCC;
    display: table-cell;
}
.left, .right {
    height:50px;        
    display: table-cell;
    background-color:#ABC123;
}
.right {
    background-color:#123456;
}

---

注意

它与 > IE7 兼容，对于 IE6 和 IE7 您可能需要查看此解决方法:http://tanalin.com/en/projects/display-table-htc/