css - CSS 三栏标题

Question

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

我需要中间列的宽度为 960 像素并居中。当文档宽度高于 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

您可以使用 css "margin: 0 auto;float:none;width:960px;" 将中心部分放在一个 div 中 其余两列带有“宽度：自动；” 据我说，它会在这种情况下工作。

Answer 3

您可以通过将主体设置为一种颜色来做到这一点

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

你可以使用类似的东西

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