Home >Web Front-end >HTML Tutorial >A big problem~~~Style problem~~~I found that I couldn't think of a solution_html/css_WEB-ITnose
A big problem~~~Style problem~~~I found that I couldn't think of a solution_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:081071browse
<!DOCTYPE html> <head> <style>#wrapper{width:800px;position:absolute;left:50%;margin-left: -400px;height:300px;border:1px solid red} </style> <body> <div id="wrapper"></div> </body></html> The web page presents a div in the center,
What we need to do now is, [immediately after] this div, add a div below it,
For example, dc6dce4a544fdca2df29d5ac0ea9906b12316b28748ea4df4d9c2150843fecfba68
The next meaning is that directly below the div with the id of wrapper, the left end is at the same distance, and the top is connected to the above div
It’s quite difficult to find~~~~
Reply to the discussion (solution)
The style of the body is: text-align:center;
The following div: width: 960px; margin:0 auto;
The style of the body is: text-align:center;
The following div: width:960px; margin:0 auto;
<!DOCTYPE html> <head> <style>#wrapper{width:800px;position:absolute;left:50%;margin-left: -400px;height:300px;border:1px solid red} </style> <body style="text-align:center;"> <div style="width:960px;margin:auto;"> <div id="wrapper"></div> <div>123</div> </div> </body></html> That should be enough, isn’t that what you meant?
Of course not~~~~123 is inside the wrapper. Of course it is wrong~~
Use float, clear
123 is outside the wrapper
The wrapper is absolutely positioned. If you want 123 to be directly below the wrapper, then 123 must also be positioned absolutely
Is this very confusing?
123 is outside the wrapper
The wrapper is absolutely positioned. If you want 123 to be directly below the wrapper, then 123 must also be absolutely positioned
Is this very confusing?
In order to facilitate observation, I set the height of this wrapper to be fixed. In actual application, the height of the wrapper is obviously adaptive.
So it is difficult~~~~
I feel that the style problem is not a problem, but I don’t understand what you mean now
How about you draw a rendering (simple and clear), the absolute positioning is not very reliable, and the resolution is different , will be misaligned
What’s so incomprehensible about this?
The style he mentioned is: what it looks like when you intercept the two areas of "reply to" and "I feel"
The former is a wrapper and the latter is 123
Since the wrapper is absolutely positioned, So 123 must also be positioned absolutely. That is, the upper left corner of 123 should coincide with the lower left corner of the wrapper
If the height of the wrapper is adaptive, then 123 must dynamically obtain the height of the wrapper to achieve positioning. This cannot be achieved without the participation of js
Of course, it is much simpler to use relative positioning or without div
Dear, you can take a look at this, I adjusted it a little
<!DOCTYPE html> <head> <style>#wrapper{width:800px;position:absolute;left:50%;margin-left: -400px;height:300px;border:1px solid red}#wrapper2{position:absolute;width:40px;height:40px;border:1px solid green;left:50%;top:310px} </style> <body><div id="wrapper"></div><div id="wrapper2">123</div> </body></html>
<!doctype html><html><head><style>* {padding:0px;margin:0px;}body {background:#ccc;}#page {width:802px;margin-left:auto;margin-right:auto;margin-top:10px;}#wrapper1 {width:800px;height:300px;border:1px solid red;background:white;}#wrapper2 {width:800px;height:300px;border:1px solid blue;background:white;}</style></head><body><div id="page"><div id="wrapper1">div1</div><div id="wrapper2">div2</div></div></body></html> 8b05045a5be5764f313ed5b9168a17e6
93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89
#wrapper{width:800px;margin-left :400px;height:300px;border:1px solid red;}
531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d
f005529f17a8328d00deaded84cdd46112316b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Points for perfect solution
93f0f5c25f18dab9d176bd4f6de5d30e
solid red;}
position:absolute;left:50%;margin-left: -400px;height:300px;border:1px solid red;top:310px">12316b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Isn’t this okay? ? ?
14590e0dc8b02dcf80f5db8388d1715e
assdf
1f8cd8c2476451f7ad8f2da395b4b6e3123416b28748ea4df4d9c2150843fecfba68