日期:2014-05-17  浏览次数:20649 次

大伙帮我看看,为什么这段DIV排出来的版面为是这样的啊?
HTML源代码:
<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN "   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html   xmlns= "http://www.w3.org/1999/xhtml "   >
<head>
<title> test </title>
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   />
<style   type= "text/css ">
#header{
MARGIN:   0px;
BACKGROUND:   #ccd2de;
WIDTH:   580px;
HEIGHT:   60px;
border-top-width:   100px;
border-right-width:   100px;
border-bottom-width:   100px;
border-left-width:   100px;
border-top-color:   #FF0000;
border-right-color:   #FF0000;
border-bottom-color:   #FF0000;
border-left-color:   #FF0000;
}
#mainbox   {
  MARGIN:   0px;
    WIDTH:   580px;
      BACKGROUND:   #FFF;
        }
#sidebar{  
FLOAT:   left;
  MARGIN:   2px   2px   0px   0px;
    PADDING:   0px;
      BACKGROUND:   #F2F3F7;
        WIDTH:   170px;
  }
#menu{
  FLOAT:   right;
    MARGIN:   2px   0px   2px   0px;
      PADDING:0px   0px   0px   0px;  
      WIDTH:   400px;
        BACKGROUND:   #ccd2de;
  }
#content{  
FLOAT:   right;
  MARGIN:   1px   0px   2px   0px;
    PADDING:0px;  
    WIDTH:   400px;
      BACKGROUND:   #E0EFDE;
      }


#footer{
  CLEAR:   both;
    MARGIN:   0px   0px   0px   0px;  
    PADDING:   5px   0px   5px   0px;  
    BACKGROUND:   #ccd2de;  
    HEIGHT:   40px;  
    WIDTH:   580px;   }


</style>

</head>
<body>
<div   id= "header "> </div>
<div   id= "mainbox ">
        <div   id= "menu "> </div>
        <div   id= "sidebar "> </div>
        <div   id= "content "> </div>
</div>
<div   id= "footer "> </div>  
</body>
</html>  


为什么menu会在左边,而sidebar和content在右边,而sidebar又在content的上方?
对DIV的CSS   浮动属性如何理解?

大家帮我解释一下啊?谢谢了。

------解决方案--------------------
现在知道你为什么每次都吝啬的只给问题点数1分了,因为你再基础的问题你都会上这来问
从不会经过自己大脑去思考的,你这样学习有什么意义?
罗嗦了……

还有,你问问题也是错误的,menu右浮动,怎么会跑到左边?你问这个问题前你测试过吗?
苏昱的css2.0.chm那手册不会的知识点上面查,查了再不会就google、baidu搜,实在搜不到就问,明白?
又罗嗦了……