我正试图摆脱使用表格,我现在正在尝试创建一个简单的基于 div 的布局 - 页眉、内容、页脚 div,宽度为 100%,没有父 div。但是我有点问题。如果我在那里插入任何内容,我的内容和页脚 div 会与页眉 div 重叠。它们出现在标题 div 的中间。如果它们是空的,它们将正常显示。但是当我在其中插入标题图片时,问题就开始了。
我试图更改 float 和显示属性,但它给了我奇怪的输出。谁能帮我把它们一个接一个地垂直定位?
这是 HTML 代码:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
这里是 css 样式:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
最佳答案
你经常使用绝对和相对定位 它们使您的布局看起来很糟糕并且元素重叠。
而且你不需要多次定义边距和其他所有属性
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
关于css - 如何在不使用父 div 的情况下垂直放置布局 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19262371/