如何在全屏寬度上並排放置兩個div？

Question

關於並排div有很多問題。我沒有錯過這些。但我需要的東西跨越整個屏幕的寬度。這是情況：

我需要三個並排放置div。左邊，中間和右邊的div我們會打電話給他們。中間div保存網站的標題內容，並且是固定寬度（800px）。我希望左側和右側div跨越任何一側的屏幕寬度的其餘部分。所以......

< -LEFT-> | MIDDLE | < - RIGHT - >

我想這樣做的原因是因爲中間（內容持有）div有一個漸變的漸變。假設漸變的左側是白色，右側是黑色。我需要左邊的div是白色的，所以它是一個延續，右邊的div是黑色的。這樣看起來像是一個橫跨整個屏幕寬度的流體標題。

謝謝。

Answer 1

你應該考慮只有一個居中的div，並在身上放置一個1px高的背景圖像，足夠大的寬度和居中。該圖像將具有左半邊白色和右邊黑色。

希望這有助於阿林

...WWWWW| DIV |BBBBB... 

Answer 2

無論如何，我不認爲這是可能的，而無需使用一個表。 通常浮動div是大小固定的，中心div是流動的。

Answer 3

我曾經實現過的這個問題的解決方案是使用2個div元素，絕對定位，中心div作爲覆蓋。我這裏有一個工作示例：

jsFiddle solution

這樣，沒關係屏幕有多寬：div的跨屏幕的50％，而中間部分是居中的div後面。

請注意，您可能必須爲高度問題使用javascript解決方法。

Answer 4

你想在左側或右側的div內容？如果沒有，只需堅持你的一箇中心格，給它一個寬度，並在你的CSS中使用margin: 0 auto;。然後，您可以使用半白半黑的圖像（比如說1px×2400px）設置body標籤的背景圖像。

如果你想僅次於您的標題是效果，那麼你可以創建一個div相同的高度，航向，並給它下面的CSS屬性：

position: absolute; 
width: 100%; 
z-index: -1; 

這樣，它應該坐在你的容器的後面（中間）div。