CSS三栏标题

我有以下问题与三栏标题相关。CSS三栏标题

我需要的中间栏是960px宽度和居中。当文档宽度高于960像素时，其他div列会出现，宽度将取决于宽度。

这里是一个图像

头部将包含背景颜色，在正确的，并在左边一个的图像重复-x的sideblocks。

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

<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; 
}

来源

2013-04-29 Apalabrados

您需要什么兼容性？ IE9/8/7？请在您的问题中指定此信息 – fcalderan 2013-04-29 11:18:17

Duplicate：http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally – 2013-04-29 11:18:37

@VimalStan不是真的;这是一个居中的div与背景在两侧，这是一个居中的div与两个其他divs在侧面... – 2013-04-29 11:42:55

只需将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; 
}

注意

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

来源

2013-04-29 11:39:24

我看到解决方案在JSFiddle中工作正常，但是在我的Header中实现相同时，它根本不起作用。 – Apalabrados 2013-04-29 17:19:51

然后发布您的标题代码，或用萤火虫检查它... – 2013-04-29 21:08:01

你可以把中心部分在一个div CSS “保证金：0汽车;浮动：无;宽度：960像素;”和其余两列“width：auto;”根据我的观点，这将适用于这种情况。

来源

2013-04-29 11:19:43

'float：none'不是必需的。 – 2013-04-29 11:23:23

是的，但我曾在所有CSS中写* {float：left;}，所以在这种情况下它是必需的。 – 2013-04-29 11:26:09

为什么你应该漂浮所有的元素？：| – fcalderan 2013-04-29 11:28:49

您可以通过设置身体做一个颜色

然后设置你的中间的div宽度960像素的带空白自动然后在右侧

您可以使用类似

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

来源

2013-04-29 11:27:26

回答

相关问题