Heim > Artikel > Web-Frontend > 新手求助， 一个页面布局的问题。_html/css_WEB-ITnose
新手求助， 一个页面布局的问题。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:161014Durchsuche
<!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>
回复讨论(解决方案)
这个代码，
页面拖动的话就会乱了，
recommend 和 ａｌｌ的部分。。。
<!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> recommend all
调整下 left 就可以了 啊。
你绝对定位left top没调好啊
2楼的代码我用ie9浏览器， 22寸显示器
全屏以后recommend，all和new都重叠了。。
话说这个论坛不能上传图片？？？？？？？
我把这个三个div全设置了float:left,问题才解决了
用position:absolute的话， 右边两个div的位置就会固定。。而 header和new是随着浏览器动的。。
float 属性 只要你的div能 固定住 都是最好加上的
我把这个三个div全设置了float:left,问题才解决了
用position:absolute的话， 右边两个div的位置就会固定。。而 header和new是随着浏览器动的。。
学习一下
问题很多，你可以测试把窗口缩小化，然后去刷新页面估计问题更大了，position: absolute;父层没有positon:re.....意思就是直接针对body去绝对定位了，没问题就才怪了，
父层没有positon:re.
neng jiangjiang ma? mei jian guo zhege.
问题很多，你可以测试把窗口缩小化，然后去刷新页面估计问题更大了，position: absolute;父层没有positon:re.....意思就是直接针对body去绝对定位了，没问题就才怪了，
说实话我没看明白你到底要做一个什么效果。这么多人回帖我先估计是我理解力不行了。但是 真的不明白你要弄一个什么布局。我想 应该是比较简单的事。
父级没有设置一个相对定位 position:relative;导致后面的绝对定位是相对于body做的绝对定位。。明白？
哦哦哦哦
原来relative是这么用的
父级没有设置一个相对定位 position:relative;导致后面的绝对定位是相对于body做的绝对定位。。明白？