3列div css

我試圖建立一個3列的網頁。中間的一個（居中）需要固定寬度（1000px），另一個沒有特定的寬度。當用戶調整窗口大小時，只需調整左側和右側窗口的大小。這可能嗎？3列div css

問候

來源

2012-01-03 Snapper

您是否嘗試過的任何代碼？你可以張貼他們在小提琴http://jsfiddle.net/ – 2012-01-03 22:49:30

是的，這是可能的

你應該建立在你的CSS一個maindiv和設置背景在你身上重複如下圖所示，並給它一個背景顏色/漸變/任何你喜歡的。我通常使用1px寬度的漸變圖片。

在您的div中設置與您身體中相同的背景顏色和圖像將有助於您根據自己的設計保持均勻的背景（例如，您的設計在20px底部留有餘量以創建清晰的空間，那麼背景會跟進，而不是顯示白色）

stylesheet.css中

body { 
margin: 0px; 
background-position: 0px 0px; 
background-repeat: repeat-x; 
background-color: #03255d; 
background-image: url(../img/bg_gradient.gif); 
} 

#MainDiv { 
position: absolute; 
width: 1000px; /* width of middle column */ 
z-index: 1; 
top: 0%; 
left: 50%; 
margin-left: -500px; /* should be half and minus of width to center it */ 
background-color: #03255d; /* set background color same as body */ 
background-image: url(../img/bg_gradient.gif); /* set background image same as body */ 
}

在你開始你的MainDiv和身體結束標籤前body標籤後您的HTML

現在你關閉MainDiv

INDEX.HTML

<body> 
    <div id="MainDiv"> 
     Your HTML here 
    </div> 
</body>

現在，當您調整您的瀏覽器，它會調整的背景和中柱撐中心

來源

2012-01-03 22:50:09 GuZzie

感謝GuZzie ...我正在嘗試這樣的事情，但位置：絕對缺失。再次感謝 – Snapper 2012-01-03 22:57:23

很高興幫助！ – GuZzie 2012-01-03 22:58:24

回答

相關問題