使用CSS實現3個塊

我希望我的頁面有3個塊：左中心右。我想要塊LEFT和RIGHT約150px寬，塊CENTER只是填補餘下的空間。每塊之間有10px的間隙。這裏是我的嘗試：使用CSS實現3個塊

#left { 
    float: left; 
    margin-top: 2px; 
    padding-left: 3px; 
    width: 150px; 
    height: 800px; 
    color: black; 
    background-color: #cccccc; 
} 

#right { 
    float: right; 
    margin-top: 2px; 
    padding-left: 3px; 
    width: 150px; 
    height: 800px; 
    color: black; 
    background-color: #cccccc; 
} 

#center {   
    margin: 2px 160px 0 160px; 
    padding-left: 3px; 
    height: 800px; 
    background-color: yellow; 
}

如果我沒有了#center，塊左側和右側（灰色）很好看。但是當我嘗試用黃色塊填充中心的空白處時，它就會陷入困境。我不能再看到我的RIGHT塊了。

來源

2010-09-15 Thang Pham

Argh。一個真正的蠕蟲罐。尋找「聖盃」並穿過你的手指。 – spender 2010-09-15 23:26:47

我相信你所描述的被稱爲「聖盃佈局」（有充分的理由！）請參閱http://www.alistapart.com/articles/holygrail關於它的好文章或谷歌「CSS Holy Grail佈局」瞭解更多。

來源

2010-09-15 23:17:49 EMP

立即閱讀。絕對看起來像我的問題的答案。謝謝+1 – 2010-09-15 23:29:13

如果您想讓高度與您的內容和單個頁面級滾動條一起縮放，這非常理想。我提供的解決方案更爲理想，如果您希望您的三個區域始終全屏顯示，並且每個區塊都有單獨的滾動條。 – David 2010-09-16 00:35:18

我明白了。非常感謝。我一定會牢記這一點。 – 2010-09-16 17:02:30

要做到這一點，最簡單的方法是使用絕對定位：

#left 
{ 
    width:150px; 
} 

#center 
{ 
    left:150px; 
    right:150px; 
} 

#right 
{ 
    right:0px; 
    width:150px; 
}

注意，所有的箱子父母必須有position:relative，彷彿有ISN絕對定位是相對於第一position:relative祖先（或者body 't one ...或者實際上可能是html。我不確定。至少在瀏覽器窗口中）。不過，有理由不使用絕對定位，所以這可能不適用於您的特定情況。例如，列不會全都是相等的高度（除非你明確地綁定高度），所以如果你想在列上有不同的背景，這可能看起來不正確。而且，跨瀏覽器兼容性肯定是一個問題。

來源

2010-09-15 23:17:46

該解決方案將適用於所有標準瀏覽器（IE7及更高版本，firefox，chrome，opera，safari）。（如果你必須有IE6的支持，我可以提供一個更新的例子）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Example</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style type="text/css"> 
#MainContainerPanel 
{ 
    position:absolute; 
    top:10px; 
    left:10px; 
    right:10px; 
    bottom:10px; 
} 
#LeftPanel 
{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    bottom:0px; 
    width:150px; 
    overflow:auto; /* change to hidden if you dont want scrolling */ 
    background-color:red; /*to clarify layout is working*/ 
} 
#CenterPanel 
{ 
    position:absolute; 
    left:160px; 
    right:160px; 
    top:0px; 
    bottom:0px; 
    overflow:auto; /* change to hidden if you dont want scrolling */ 
    background-color:green; /*to clarify layout is working*/ 
} 
#RightPanel 
{ 
    position:absolute; 
    right:0px; 
    top:0px; 
    bottom:0px; 
    width:150px; 
    overflow:auto; /* change to hidden if you dont want scrolling */ 
    background-color:blue; /*to clarify layout is working*/ 
} 

</style> 
</head> 
<body> 
    <div id="MainContainerPanel"> 
     <div id="LeftPanel">This is the left panel</div> 
     <div id="CenterPanel">This is the center panel</div> 
     <div id="RightPanel">This is the right panel</div> 
    </div> 
</body> 
</html>

來源

2010-09-15 23:45:58 David

使用CSS實現3個塊

回答

相關問題