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

新手求助, 一个页面布局的问题。
HTML code

<!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></title>
    <style type="text/css">
    #divBody
    {
        width: 1024px;
        margin: 0 auto;
        }
    #container
    {  margin: 0 auto;
        width: 950px;}
        
    #header
    { width: 950px;
      height:300px;
      margin: 0 auto;
      background-color: #aaaaaa;
      margin-bottom: 10px;
      border-bottom: 3px solid;
    }
    #new
    {width: 205px;
     height: 739px;
     background-color: green;
     
     top:400px;
     left: 100px;
     margin-right: 10px;
        }
        
        #recommend
        {width: 735px;
         height: 200px;
        position: absolute;
        top:325px;
        left: 570px;
         background-color: yellow;
         
        
            }
    #all 
    {   
        width: 735px;
        height: 500px;
        background-color: blue;
        position: absolute;
         left: 570px;
         top:550px;
    }
    
    </style>

</head>
<body>
<div id="divBody">
<div id="header">header</div>
<div id="container">
<div id="new">new</div>
<div id="recommend">recommend</div>
<div id="all">all</div>
</div>
</div>
</body>
</html>




------解决方案--------------------
HTML code

<!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></title>
    <style type="text/css">
    #divBody
    {
        width: 1024px;
        margin: 0 auto;
        }
    #container
    {  margin: 0 auto;
        width: 950px;}
        
    #header
    { width: 950px;
      height:300px;
      margin: 0 auto;
      background-color: #aaaaaa;
      margin-bottom: 10px;
      border-bottom: 3px solid;
    }
    #new
    {width: 205px;
     height: 739px;
     background-color: green;
     
     top:400px;
     left: 100px;
     margin-right: 10px;
        }
        
        #recommend
        {width: 735px;
         height: 200px;
        position: absolute;
        top:325px;
        left: 310px;
         background-color: yellow;
         
        
            }
    #all 
    {   
        width: 735px;
        height: 500px;
        background-color: blue;
        position: absolute;
         left: 310px;
         top:550px;
    }
    
    </style>

</head>
<body>
<div id="divBody">
<div id="header">header</div>
<div id="container">
<div id="new">new</div>
<div id="recommend">recommend</div>
<div id="all">all</div>
</div>
</div>
</body>
</html>

------解决方案--------------------
你绝对定位left top没调好啊
------解决方案--------------------
float 属性 只要你的div能 固定住 都是最好加上的
------解决方案--------------------
探讨

我把这个三个div全设置了float:left,问题才解决了


用position:absolute的话, 右边两个div的位置就会固定。。而 header和new是随着浏览器动的。。

------解决方案--------------------
问题很多,你可以测试把窗口缩小化,然后去刷新页面估计问题更大了,position: absolute;父层没有positon:re.....意思就是直接针对body去绝对定位了,没问题就才怪了,