首先，有没有父不重要，因为没有父，浏览器就是父。
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写居中，只会对其中的内容如文字有效。
