如何定位固定位置，动态宽度div [包含图表]？

Question

我有一个固定宽度，相对定位和居中的#content 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放在容器的中心位置;

两个div都应该有max-width。 （对于这个例子，我删除了边距，只是让你看到了我的观点）。

所以：

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

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