如何居中固定位置、动态宽度的 div [包括图表]？

Question

我有一个固定宽度、相对定位且居中的#content div（如下图红色外框所示）。在这个div的顶部，我需要放置两个固定位置的header 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;
 }