为什么一个<div>与另一个<div>重叠？

Question

为什么一个<div>与另一个<div>重叠？

这是我的页面的HTML:

<body>
  <header></header>
  <div class="conteudo_representantes"></div>
  <div class="rodape"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

我里面的内容.conteudo_representantes 股利即是要在.rodape(页脚)DIV.

这是我的页面的CSS:

.conteudo_representantes {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    min-height:586px;
    margin-top:40px;
    position: relative;
}


.rodape {
    position: relative;
    width:960px;
    height:50px;
    margin:36px auto;
    background:transparent url(../img/header_pattern.png) repeat top left;
}

Run Code Online (Sandbox Code Playgroud)

在此示例中可以找到整页源.(单击列表的第二行,其中显示:02 - 圣保罗 - 资本,以查看此问题的实际效果.)

我究竟做错了什么？

Answer 1

Jac*_*ero 13

问题是你的div conteudo_representantes没有正确地包装它的所有内容,所以就它而言,页脚处于正确的相对位置并且代表 div由于某种原因而溢出

编辑:

它实际上与您管理float属性的方式有关.

你的div 代表浮动向左,但页脚没有.您可以通过float:left关闭代表 div 来测试它.

这是div重叠的常见原因.

在布局HTML页面时,请考虑每个div元素如何堆叠到下一个.该float元素最终将决定div如何堆叠

这是一个正确堆叠元素的快速指南

@Preston或者你可以在页脚中添加`clear:both`. (2认同)
我已经完成了......我在div**代表**上设置了'margin-botton:36px`并且运行正常!...感谢@AndrewPeacock和@JackalopeZero的帮助! (2认同)

归档时间：	14 年前
查看次数：	59071 次
最近记录：	14 年前