Heim >Web-Frontend >HTML-Tutorial >新手求助, 一个页面布局的问题。_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:09:161031Durchsuche

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn