我想要的是在顶部居中的标题图像,两侧有不同的颜色背景,动态填充页面的其余部分.结构看起来像这样:
<div id="Header_Container"> <div id="Header_Left"></div> <div id="Header_Center"></div> <div id="Header_Right"></div> </div>
Header_Center为960px,Header_Left和Header_Right应将图像的任一侧填充到页面边缘,并随页面宽度的变化更改宽度.
我无法使CSS正常工作.
解决方法
您必须使用填充和框模型位置来修复它:相对 – 它可以在没有HTML更改的情况下完成
<div id="Header_Container"> <div id="Header_Left"></div> <div id="Header_Right"></div> <div id="Header_Center"></div> </div>
和CSS(例如100px)
#Header_Container{ overflow: hidden; height: 100px; } #Header_Container *{ Box-sizing: border-Box; height: 100%; } #Header_Left{ width: 50%; padding-right: 480px; } #Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% }; #Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }