css - 如何居中固定位置、动态宽度的 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;}