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

回答

相關問題