首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

新手, 一个页面布局的有关问题

2012-04-12 
新手求助,一个页面布局的问题。HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

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

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去绝对定位了,没问题就才怪了,


[解决办法]
说实话我没看明白你到底要做一个什么效果。这么多人回帖我先估计是我理解力不行了。但是 真的不明白你要弄一个什么布局。我想 应该是比较简单的事。
[解决办法]
父级没有设置一个相对定位 position:relative;导致后面的绝对定位是相对于body做的绝对定位。。明白?

热点排行