左右布局
- 使用浮动
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.left {
width: 20%;
float: left;
background: red;
}
.right {
margin-left: 20%;
background: blue;
}
.footer {
border: 1px solid red;
}
</style>
</head>
<body>
<main class="container clearfix">
<section class="left">
<p>lzx</p>
</section>
<section class="right">
<p>hello</p>
<p>world</p>
</section>
</main>
<footer class="footer">test</footer>
</body>
</html>2.使用flex
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
width: 20%;
float: left;
background: red;
}
.right {
flex: 1;
background: blue;
}
.footer {
border: 1px solid red;
}
</style>
</head>
<body>
<main class="container">
<section class="left">
<p>lzx</p>
</section>
<section class="right">
<p>hello</p>
<p>world</p>
</section>
</main>
<footer class="footer">test</footer>
</body>
</html>
跑一下上述两段代码。会发现flex的方式是两栏等高布局，而float的这种不是。
左中右布局
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
54
55
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.left {
width: 20%;
float: left;
background: red;
}
.center {
margin: 0 20%;
background: deeppink;
}
.right {
width: 20%;
float: right;
background: blue;
}
.footer {
border: 1px solid red;
}
</style>
</head>
<body>
<main class="container clearfix">
<section class="left">
<p>lzx</p>
</section>
<article class="center">
<p>I love you, looking for my be'shirt</p>
</article>
<section class="right">
<p>hello</p>
<p>world</p>
</section>
</main>
<footer class="footer">test</footer>
</body>
</html>这时候会发现一个问题，蓝色的会在下面，解决方式是将蓝色节点放在粉红节点的前面。引申原理会到BFC，会再开一篇博客介绍。
2.flex
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 lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
width: 20%;
float: left;
background: red;
}
.center {
flex: 1;
background: deeppink;
}
.right {
width: 20%;
background: blue;
}
.footer {
border: 1px solid red;
}
</style>
</head>
<body>
<main class="container">
<section class="left">
<p>lzx</p>
</section>
<section class="center">
<p>I love you, looking for my be'shirt</p>
</section>
<section class="right">
<p>hello</p>
<p>world</p>
</section>
</main>
<footer class="footer">test</footer>
</body>
</html>
水平居中
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
58
59
60
61
62
63
64
65
66
67
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.tc {
text-align: center;
}
.draw {
width: 30px;
height: 30px;
}
.container {
position: relative;
padding-bottom: 30px;
}
.plc {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 120px;
text-align: center;
}
.plc2 {
position: absolute;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
.fcc {
display: flex;
justify-content: center;
}
.fighting {
width: 120px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- inline inline-block -->
<article class="tc">
<span>center</span>
</article>
<div class="tc">
<img class="draw" src="./yourjobthecentralpark.png" alt="">
</div>
<!-- position -->
<div class="container">
<p class="plc">我是水平的中心</p>
</div>
<div class="container">
<p class="plc2">我是水平的中心</p>
</div>
<!-- flex -->
<article class="fcc">
<p>你们好，我是篮球少年，小林同学</p>
</article>
<!-- margin -->
<p class="fighting tc">加油，小林</p>
</body>
</html>垂直居中
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.lh {
height: 30px;
line-height: 30px;
border: 1px solid red;
}
.fac {
display: flex;
align-items: center;
height: 30px;
border: 1px solid blue;
}
.container {
position: relative;
height: 30px;
border: 1px solid deeppink;
}
.ptc {
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
}
</style>
</head>
<body>
<!-- text line-height -->
<p class="lh">没事看看后端，说不定以后会用上</p>
<!-- flex -->
<p class="fac">php是最好的语言，鸟哥是最强的php程序员</p>
<!-- position -->
<article class="container">
<p class="ptc">java收费，未来难说</p>
</article>
</body>
</html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com
