新手求助, 一个页面布局的问题。_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:09:16
原創
1010 人瀏覽過

<!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 和 all的部分。。。

<!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做的绝对定位。。明白?

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板