Home > Article > Web Front-end > Newbie asking for help, a page layout problem. _html/css_WEB-ITnose
Newbie asking for help, a page layout problem. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:161011browse
<!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>
Reply to discussion (solution)
This code,
will mess up the page if you drag it,
recommend and all parts. . .
<!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
Just adjust left.
You have not adjusted the absolute positioning left top properly
I used the ie9 browser for the code on the second floor, 22-inch monitor
After full screen, recommend, all and new overlap. .
Say you can’t upload pictures to this forum? ? ? ? ? ? ?
I set float:left for all three divs, and the problem was solved
If position:absolute is used, the positions of the two divs on the right will be fixed. . The header and new are moved with the browser. .
It is best to add the float attribute as long as your div can be fixed
I set float:left for all three divs, and the problem was solved
If you use position:absolute, the positions of the two divs on the right will be fixed. . The header and new are moved with the browser. .
Learn about it
There are many problems. You can try to reduce the window size and then refresh the page. It is estimated that the problem is bigger. position: absolute; the parent layer does not have positon:re.... It means directly It’s strange that the body is absolutely positioned, and there is no problem.
The parent layer does not have positon:re.
neng jiangjiang ma? mei jian guo zhege.
There are many problems. You can try to reduce the window size, and then refresh the page. It is estimated that the problem is bigger. Position: absolute; the parent layer does not have positon:re.... It means that the absolute positioning is directly directed to the body. No problem. That's weird,
To be honest, I don't understand what effect you want to achieve. With so many people replying, I first guessed that I was losing my understanding. But I really don’t understand what layout you want to create. I think it should be a relatively simple matter.
The parent does not set a relative positioning position:relative; causing the subsequent absolute positioning to be absolute positioning relative to the body. . clear?
Oh oh oh oh
It turns out that relative is used like this
The parent does not set a relative positioning position:relative; causing the subsequent absolute positioning to be done relative to the body Absolute positioning. . clear?