使用div中position的absolute和relative两种方式进行横向和纵向排列两种方式布局优劣势解析

首先，有没有父不重要，因为没有父，浏览器就是父。

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>

</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>

<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 id = "a">红色
</div>
<div id = "b">绿色
</div>
<div id = "c">蓝色
</div>
<div id = "d">橙色
</div>
</div>
</body>
</html>

必须套一个div，才能整体浏览器居中，如果是子div写居中，只会对其中的内容如文字有效。