首先,有没有父不重要,因为没有父,浏览器就是父。
1,横向排列,使用absolute。对于横向排列,这是推荐的方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <html> <body> <head> <style> #a{ height:100px; width:100px; position: absolute; background-color:red; right:50px; top:50px; } #b{ height:100px; width:100px; position:absolute; background-color:green; right:250px; top:50px; } #c{ height:100px; width:100px; position: absolute; background-color:blue; right:450px; top:50px; } #d{ height:100px; width:100px; position: absolute; background-color:orange; right:650px; top:50px; } </style> </head> <body bgcolor=yellow> <div id = "a">红色 </div> <div id = "c">蓝色 </div> <div id = "b">绿色 </div> <div id = "d">橙色 </div> </body> </html> |
使用absolute进行横向排列是最好的方式,只需要考虑横向的距离,不需要考虑纵向的计算。但是即使是横向的距离,也要同时考虑div的横向宽度和div之间的间距。
2,横向排列,使用relative。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <html> <body> <head> <style> #a{ height:100px; width:100px; position: relative; background-color:red; right:50px; top:50px; } #b{ height:100px; width:100px; position: relative; background-color:green; right:250px; top:-50px; } #c{ height:100px; width:100px; position: relative; background-color:blue; right:450px; top:-150px; } #d{ height:100px; width:100px; position: relative; background-color:orange; right:650px; top:-250px; } </style> </head> <body bgcolor=yellow> <div align=right><!--还必须得加一个父才能右对齐,有点耍流氓--> <div id = "a">红色 </div> <div id = "b">绿色 </div> <div id = "c">蓝色 </div> <div id = "d">橙色 </div> <!--从style里的top设置来看,需要计算div的高度值,很麻烦,所以横向排列一般不用relative--> </div> </body> </html> |
里面比较麻烦的几个地方:
1)还必须得加一个父才能右对齐,有点耍流氓。如果是左对齐,那就太简单了,这里要讨论到所有情况,所以以右对齐为例。
2)从style里的top设置来看,需要计算div的高度值,很麻烦,所以横向排列一般不用relative。
3,纵向排列,使用absolute。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <html> <body> <head> <style> #a{ height:100px; width:100px; position: absolute; background-color:red; left:50px; top:50px; } #b{ height:100px; width:100px; position: absolute; background-color:green; left:50px; top:200px; } #c{ height:100px; width:100px; position: absolute; background-color:blue; left:50px; top:350px; } #d{ height:100px; width:100px; position: absolute; background-color:orange; left:50px; top:500px; } </style> </head> <body bgcolor=yellow> <!--使用absolute控制纵向高度和间距,就必须计算div的高度值和间距值,并且还不能横向居中,麻烦--> <div id = "a">红色 </div> <div id = "b">绿色 </div> <div id = "c">蓝色 </div> <div id = "d">橙色 </div> </body> </html> |
1)使用absolute控制纵向高度和间距,就必须计算div的高度值和间距值,麻烦;
2)并且还不能横向居中,不管你在body中加align=center还是加center标签,还是加个父,使用absolute居中,然并卵。通通的不行。
4,纵向排列,使用relative。对于纵向排列,这是推荐的方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <html> <body> <head> <style> #a{ height:100px; width:100px; position: relative; background-color:red; left:50px; top:50px; } #b{ height:100px; width:100px; position: relative; background-color:green; left:50px; top:150px; } #c{ height:100px; width:100px; position: relative; background-color:blue; left:50px; top:250px; } #d{ height:100px; width:100px; position: relative; background-color:orange; left:50px; top:350px; } </style> </head> <body bgcolor=yellow> <div align=center><!--必须套一个div,才能整体浏览器居中,如果是子div写居中,只会对其中的内容如文字有效--> <div id = "a">红色 </div> <div id = "b">绿色 </div> <div id = "c">蓝色 </div> <div id = "d">橙色 </div> </div> </body> </html> |
必须套一个div,才能整体浏览器居中,如果是子div写居中,只会对其中的内容如文字有效。