2012-08-06 59 views
0

我需要以下佈局,其中三列,左側,內容&正確。CSS:具有固定中心的可變寬度側面板

左側和右側的內容只是在其中有一個圖像,而左側的col。圖片需要留在瀏覽器的左側,右側的列。圖片位於瀏覽器的右側,因此當瀏覽器寬度調整大小時,兩列都保持其邊緣。

當作爲內容/中心列需要是固定的帶960像素,並且還保持在屏幕的中間。

所以在調整瀏覽器的寬度在中間的內容停留,但後來當瀏覽器寬度減小左,右列不要超過的主要內容,但住兩側。

我已經試過多次,但我有現在很成功,任何幫助,將不勝感激。

感謝對

UPDATE:

按照要求我加入了什麼,我已經嘗試了jsfiddle

http://jsfiddle.net/UcmBj/

我得到99%的我想要什麼,但內容仍然居中,右側保持在右側,但理想情況下,我希望它的內容和麪板保持居中。

此刻如果按比例縮小的內容的左列和部分是可見的,但我想在窗口要觀看/中心的內容,以便左欄移位到左關閉屏幕。感謝希望鏈接幫助。

位的細節:側欄應該是280分鐘的寬度和960集的內容部分的寬度,從而分鐘1520

+0

你能爲我們做一個jsfiddle嗎? – 2012-08-06 09:58:57

+0

您是否想要實現類似http://www.dabs.com/旁邊的廣告?如果是這樣,檢查他們是如何做到的(一個單一的背景圖像3000像素寬) – Richard 2012-08-06 11:21:20

+0

感謝理查德,在一種方式是,關於居中,但左列中的圖像必須左對齊瀏覽器邊緣和相同的右img,衝到右邊 – 2012-08-06 11:30:25

回答

0

井具有環顧四周,看起來好像它不可能只是還沒有對我怎麼想做到這一點,所以我所做的就是在使用CSS來我的左,右列定位成左側和右側,然後使用CSS媒體查詢爲每個查詢添加了一個負邊距,以便它們移動以便不中斷主要內容。