使用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>
<!--从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写居中,只会对其中的内容如文字有效。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: