製作一個網站與3格與中心內容和2個「緩衝區」填充通知水平空間

我正在做一個CSS網站，我想看起來像這樣︰ 3個垂直格。 左中心右。在中心 div是網站內容，並且我希望左和右 div來填充中心和瀏覽器邊框之間的空間。製作一個網站與3格與中心內容和2個「緩衝區」填充通知水平空間

這是我的代碼。

#container 
{ 
width:100%; 
background-color:#000; 
} 
.center 
{ 
width:1000px; 
height:400px; 
background-color:#F90; 
margin: 0px auto; 
overflow: auto; 
} 
.spacer-left 
{ 
width:100%; 
height:400px; 
background-color:#F90; 
float:left; 
} 
.spacer-right 
{ width:100%; 
height:400px; 
background-color:#F90; 
}

這裏是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Untitled Document</title> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="container"> 
<div class="spacer-left"></div> 
<div class="center" style="background-color:#F30;"></div> 
<div class="spacer-right"></div> 
<div style="clear:both"></div> 
</div> 
</body> 
</html>

我嘗試用2周的div並沒有問題。左邊是float：左邊和右邊寬度，右邊是100％寬度，沒有浮動。有效。但如何使它與3個div。提前致謝！

來源

2010-11-19 Victor

謝謝你的幫助，塞巴斯蒂安但我想出別的辦法。這是代碼現在的樣子，它的工作原理。

#container 
{ 
    width:1000px; 
    background-color:#000; 
    margin:0 auto; 
} 
.center 
{ 
    width:100%; 
    height:400px; 
    background-color:#F90; 
    margin: 0px auto; 
    overflow: auto; 
} 
.spacer 
{ 
    width:50%; 
    height:400px; 
    background-color:#F90; 
    float:left; 
} 
.head_warp 
{ 
    width:100%; 
    display:block; 
    height:400px; 
    margin:0 auto; 
    padding:0; 
    position:absolute; 
    top: 0; 
    left: 0; 
    text-align:center; 
    z-index:-9999; 
}

和HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Untitled Document</title> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div class="head_warp"> 
<div class="spacer"></div> 
<div class="spacer" style="background-color:#F06"></div> 
</div> 
<div id="container"> 
<div class="center" style="background-color:#F30;"></div> 
</div> 
</body> 
</html>

再次感謝你的幫助之一。如果我的解決方案出現問題，我會再次寫在這裏。

來源

2010-11-19 14:46:17 Victor

偉大的維克多，如果問題解決了，你應該upvote並接受答案。 – 2010-11-20 22:13:50

如何做到這一點，因爲我不熟悉這裏的系統。 – Victor 2010-11-24 10:30:00

更新：使用三個div和z-index作爲下面答案的不同選擇。

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

，如果你正試圖使在中心DIV內容的網站，你可以使用簡單的複製這種佈局：

<body> 
    <div class="center">center</div> 
</body>

與CSS：

html {height: 100%; } 
.center { width:750px; margin: 30px auto; height: 100%; }

在此玩弄：http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

from th e類名稱.spacer_left和.spacer_right我假設這些div是空的間隔符而不是必需的。

這是對基本的CSS佈局的好資源：http://www.csseasy.com/

來源

2010-11-19 11:18:00

我想把背景圖像放在.spacer_left和.spacer_right這就是爲什麼我想這樣。 – Victor 2010-11-19 11:44:14

您可以在body標籤本身上放置背景，因爲內容寬度具有固定的寬度，所以您可以使用單個圖像作爲背景併爲其指定中心背景附件。 – 2010-11-19 11:46:41

謝謝你的建議，但我知道。我想要重複x的背景以填充用戶屏幕分辨率的空間。 – Victor 2010-11-19 11:52:25

製作一個網站與3格與中心內容和2個「緩衝區」填充通知水平空間

回答

相關問題