我希望在一个更大的居中的"all“div中有几个绝对定位的div容器,它必须有相对定位,以便它可以在浏览器中居中,这样我就可以完全控制内部div,同时仍然可以有一个居中的页面。我试过这样做:
<body>
<div id="all">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>以此作为css:
#all
{
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
width:1000px;
height:1300px;
}
#header
{
background-color:#ff0000;
position:absolute;
top:0px;
left:0px;
width:1000px;
height:200px;
}
#main
{
background-color:#00ff00;
position:absolute;
top:200px;
left:0px;
width:1000px;
height:1000px;
}
#footer
{
background-color:#0000ff;
position:absolute;
top:1200px;
left:0px;
width:1000px;
height:100px;
}但是,#header,#main和#footer都是分开的,并与顶部和左侧对齐,没有居中,与父级div #all完全分开,因为#all像它应该的那样居中。谁能解释一下为什么会发生这种情况,并告诉我一个解决办法?
发布于 2012-08-03 10:47:07
给#all position:relative;,事情应该会像预期的那样工作。
https://stackoverflow.com/questions/11788516
复制相似问题