CSS三列标题

Question

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

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

这是一张图片

标题的边栏将包含右侧背景颜色，左侧包含重复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/

Answer 2

你可以把中心部分放在一个div中，css为“margin：0 auto; float：none; width：960px;”和剩余的两列“width：auto;”根据我的说法，它将适用于这种情况。

Answer 3

你可以通过将主体设置为一种颜色

来实现

然后将中间div设置为宽度960px，边距为自动，然后在右侧

您可以使用类似

的内容

    @media only screen and (max-width: 960px)                            
    { 
    #yourrightdiv { 
    display: none; 
} 
}