Question

我在my page上有一个页脚，内容正确放置在div #main（包括div＃left和div＃right）下，但是背景（大蓝色的东西）放在了DIV＃主

我尝试过显示：阻止和对索引进行z索引，但无济于事。

任何人都知道发生了什么事？

代码：

body {
  background:url(aaa-bg.jpg) repeat-x #e7e9e9;
  margin:0;
  padding:0;
  color:#383838;
  font:12pt verdana;
}

img {
  border:0;
}

a:link {
  color:#e29511;
  text-decoration:none;
}

a:hover {
  color:#e29511;
  text-decoration:underline;
}

a:visited {
  color:#808080;
}


/* header ------------------------------------------------------------------------------ */

#header {
  margin:10px auto 10px;
  width:800px;
  height:97px;
}

/* nav ------------------------------------------------------------------------------ */

#nav {
  width:800px;
  margin:0px auto 3px;
  height:30px;
}

#nav ul {
  margin:0 0px 0px 0;
  padding:0;
  list-style:none;
}

#nav ul li {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li:hover {
  cursor:pointer;
  border-top:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li.home {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li.home:hover {
  cursor:pointer;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
}


#nav ul li ul {
  width:140px;
  margin:5px 0 0 -3px;
  float:left;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
  background:url(aaa-navbg3.png) repeat-x #ffffff;
  border-bottom:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li ul li {
  width:140px;
  font-weight:normal;
  font-size:10pt;
  background:none;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
}

#nav ul li ul li:hover {
  background:url(aaa-libg2.png) repeat-x;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
}


/* toppane ------------------------------------------------------------------------------ */

#toppane {
  width:100%;
  height:210px;
  background:url(aaa-toppane3.jpg) repeat-x;
  padding:20px 0 20px;
  margin:0px 0 20px 0;
  position:relative;
  z-index:-1;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

#toppane-inner {
  width:800px;
  height:210px;
  margin:0px auto;
}

/* slideshow ------------------------------------------------------------------------------ */

#window {
  clear:both; 
  width:800px; 
  height:210px; 
  overflow:hidden; 
  position:relative; 
  margin:0;
  padding:0;
}

#slideshow {
  width:1600px; 
  height:420px; 
  overflow:hidden; 
  position:relative;
  margin:0;
  padding:0;
}

#slideshow li { 
  width:800px; 
  height:210px; 
  float:left; 
  display:inline;
  margin:0;
  padding:0;
}

/* main ------------------------------------------------------------------------------ */

#main {
  width:800px;
  margin:5px auto;
  padding:0px;
}

#left {
  width:390px;
  margin:0 20px 0 0;
  padding:0px;
  float:left;
}

#right {
  width:390px;
  font-size:11pt;
  margin:0;
  padding:0px;
  float:right;
}

#right img {
  margin:0 0 5px 0;
}

#right a:link {
  text-decoration:none;
  color:#383838;
}

#right a:hover {
  text-decoration:none;
  color:#383838;
}

#right a:visited {
  text-decoration:none;
  color:#383838;
}

h2 {
  width:390px;
  font:14pt verdana;
  border-bottom:1px solid #383838;
  margin:0 0 5px 0;
  text-align:right;
}

.segment {
  margin:0 0 40px 0;
}

#footer {
  background:blue;
  width:800px;
  margin:30px auto;
  color:#ffffff;
}

#footer table {
  width:800px;
}

#footer tr {
  width:800px;
}

#footer td {
  width:200px;
}

Answer 1

向页脚添加clear:left;可以解决此问题。

您看到的问题是#left和#right都延伸到#main div之外，因为它们是浮动的，而#main div中没有任何内容正在清除那些漂浮物。

然后页脚垂直堆叠在#main div上，与#left和#right的高度不同。

你可以做的一件事就是将主要的div拉到浮动的物品上，在它的末尾添加一些东西来清除浮子。您可以使用CSS执行此操作，如下所示：

#main:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}

Answer 2

您需要使用的是所谓的“明确修复”。事情是重叠的，因为浏览器不知道何时停止“浮动”的东西，可以这么说。

你可以：

a）在主要div之后添加以下内容

<div style="clear: both;">&nbsp;</div>

b）将clear: both样式添加到页脚本身。

div重叠/错位

2 个答案: