页面布局

目录

1
2
3
问题引入
解决方案及代码演示
归纳总结

1- 问题引入

题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
blockchain

2- 解决方法

1.左右固定宽度的div设置左浮动和右浮动,中间一个div自适应。

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html * {
margin: 0;
padding: 0;
}

.layout article div {
min-height: 100px;
}

.layout .left-right-center .left {
float: left;
width: 300px;
background: red;
}

.layout .left-right-center .right {
float: right;
width: 300px;
background: blue;
}

.layout .left-right-center .center {
background: green;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left">
我是左边固定宽度300px
</div>
<div class="right">
我是右边固定宽度300px
</div>
<div class="center">
我是float中间自适应部分
</div>
</article>
</section>
</body>
</html>

2.三个div都设置绝对定位,中间一个div记得left和right都取300px。

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
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html * {
margin: 0;
padding: 0;
}

.layout article div {
min-height: 100px;
}
/*所有的div都设置成为绝对定位*/
.layout .left-right-center > div {
position: absolute;
}

.layout .left-right-center .left {
top: 0;
left: 0;
width: 300px;
background: red;
}

.layout .left-right-center .right {
top: 0;
right: 0;
width: 300px;
background: blue;
}

.layout .left-right-center .center {
left: 300px;
right: 300px;
background: green;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left">
我是左边固定宽度300px
</div>
<div class="right">
我是右边固定宽度300px
</div>
<div class="center">
我是absolute中间自适应部分
</div>
</article>
</section>
</body>
</html>

3.使用flexbox,中间一个div使用flex:1。

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html * {
margin: 0;
padding: 0;
}

.layout article div {
min-height: 100px;
}

.layout .left-right-center {
display: flex;
}

.layout .left-right-center .left {
width: 300px;
background: red;
}

.layout .left-right-center .right {
width: 300px;
background: blue;
}

/*主要靠flex:1解决自适应*/
.layout .left-right-center .center {
flex: 1;
background: green;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left">
我是左边固定宽度300px
</div>
<div class="center">
我是flexbox中间自适应部分
</div>
<div class="right">
我是右边固定宽度300px
</div>

</article>
</section>
</body>
</html>

4.使用table布局。

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
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html * {
margin: 0;
padding: 0;
}

.layout article div {
min-height: 100px;
}

.layout .left-right-center {
width: 100%;
height: 100px;
display: table;
}

.layout .left-right-center > div {
display: table-cell;
}

.layout .left-right-center .left {
width: 300px;
background: red;
}

.layout .left-right-center .right {
width: 300px;
background: blue;
}

.layout .left-right-center .center {
background: green;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left">
我是左边固定宽度300px
</div>
<div class="center">
我是table-cell中间自适应部分
</div>
<div class="right">
我是右边固定宽度300px
</div>

</article>
</section>
</body>
</html>

5.使用grid网格布局。

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
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html * {
margin: 0;
padding: 0;
}

.layout article div {
min-height: 100px;
}

.layout .left-right-center {
display: grid;
/*设置网格宽度100%*/
width: 100%;
/*设置行高100px*/
grid-template-rows: 100px;
/*需要三列,左侧300px,中间自适应,右侧300px*/
grid-template-columns: 300px auto 300px;
}

.layout .left-right-center .left {
background: red;
}

.layout .left-right-center .right {
background: blue;
}

.layout .left-right-center .center {
background: green;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left">
我是左边固定宽度300px
</div>
<div class="center">
我是table-cell中间自适应部分
</div>
<div class="right">
我是右边固定宽度300px
</div>

</article>
</section>
</body>
</html>

3- 归纳总结

1.第一种浮动的解决方案,缺点是浮动的元素已经脱离了文档流,所以我们要将清除浮动的工作要做好,不然会影响周围的元素布局,优点是该方案的兼容性比较好。
2.第二种绝对定位的解决方案,由于完全脱离了文档流,导致实用性比较差,因为我们接下来在页面上写别的布局时候,造成子元素也要进行使用定位。
3.推荐使用此种方案,简单明了,缺点是兼容性问题要考虑(IE8不支持)。
4.table布局比较老,但是兼容性比较好,如果考虑兼容性的话,可以作为flex布局的一种补充方案。
5.网格布局技术比较新,可以扩展自己的技术。

-------------本文结束感谢您的阅读-------------