如何居中固定位置，動態寬度div [包括圖表]？

Question

我有一個固定寬度，相對定位和居中的＃內容div（顯示爲下面的紅色外框）。在這個div的頂部，我需要放置兩個固定位置標題div，一箇中心左側和一個右側中心（中心線顯示爲紅色虛線）。

這兩個標題div具有動態寬度，需要錨定在朝向中心的一側（以粗體黑色顯示）。當它們長大時，它們的外邊緣應朝周邊延伸（用黑色箭頭表示）。

我想我可以做到像這樣的東西，但沒有運氣的影響：

#leftheader { position:fixed; top:0; left:50%; margin-right:10px; } 
#rightheader { position:fixed; top:0; right:50%; margin-left:10px; } 

圖：

所有幫助非常感謝。謝謝！

Answer 1

這是a solution我想出了。它使用4個總容器來完成你想要的。剛剛從leftHold和rightHold

HTML去除背景顏色

<div id="leftHold"> 
    <div id="leftHeader">TEST1234</div> 
</div> 
<div id="rightHold"> 
    <div id="rightHeader">TEST</div> 
</div> 

CSS

body{padding:0px;} 

#leftHold{width:50%; float:left; height:40px;background:#ccc;} 
#leftHeader{ float:right; margin-right:10px; background:#ffc;} 

#rightHold{width:50%; float:right; height:40px;background:#ddd;} 
#rightHeader{ float:left; margin-left:10px; background:#ffc;} 

Answer 2

我這樣做：（知道如你所說，該容器具有固定寬度，比方說800px）

位置右邊的容器位於容器的中央;

將右邊的div放在容器的中心位置;

兩個div都應該有max-width。 （對於這個例子，我刪除了餘量，只是讓你看到我的觀點）。

所以：

#leftheader { 
    position: absolute; 
    top:0; 
    right:400px; 
    max-width: 400px; 
} 

#rightheader { 
    position: absolute; 
    top:0; 
    left:400px; 
    max-width: 400px; 
}