2020-01-11

CSS 常见布局

CSS

水平居中

image
实现 Demo 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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center Horizontal - 水平居中</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #parent {
            width: 100%;
            height: 100vh;
            background: #cccccc;
        }

        #child {
            width: 100px;
            height: 100px;
            background: orangered;
        }
    </style>
    <style>
        /*  父级元素使用 text-align: center  */
        #parent {
            text-align: center;
        }

        /*
            子级元素使用 display: inline-block
            子级元素使用 display: inline 时，width 和 height 是无效的
            子级元素使用 display: block 时，父级元素 text-align: center 对子级元素是无效的
        */
        #child {
            display: inline-block;
            /*  子级元素需要设置 text-align 避免继承父级元素的 text-align: center  */
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">水平居中</div>
</div>
</body>
</html>

实现 Demo 2 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center Horizontal - 水平居中</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #parent {
            width: 100vw;
            height: 100vh;
            background: #cccccc;
        }

        #child {
            width: 100px;
            height: 100px;
            background: orangered;
        }
    </style>
    <style>
        /*
           margin 外边距
           一个值 - 上右下左
           二个值 - 上下，左右
           三个值 - 上，左右，下
           四个值 - 上，右，下，左
           auto - 根据浏览器自动分配
       */
        #child {
            /* display: table 和 display: block 都是可以实现同样的效果 */
            display: block;
            margin: 0 auto;
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">水平居中</div>
</div>
</body>
</html>

实现 Demo 3 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center Horizontal - 水平居中</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #parent {
            width: 100vw;
            height: 100vh;
            background: #cccccc;
        }

        #child {
            width: 100px;
            height: 100px;
            background: orangered;
        }
    </style>
    <style>
        #parent {
            /*
                父级元素需要开启相对定位，否则子级元素相对于 body 元素进行定位
            */
            position: relative;
        }

        #child {
            /*
                子级元素开启绝对定位
            */
            position: absolute;
            left: 50%;
            /*  向左水平移动子级元素的一半宽度，等同于 transform: translateX(-100px)  */
            transform: translateX(-50%);
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">水平居中</div>
</div>
</body>
</html>

实现 Demo 4 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center Horizontal - 水平居中</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            width: 100vw;
            height: 100vh;
            background-color: #464159;
        }
        #main{
            width: 100px;
            height: 100px;
            background-color: #8ac6d1;
        }
    </style>
    <style>
        #container{
            flex-direction: row;
            justify-content: center;
        }
        #main {
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="main">
        水平居中
    </div>
</div>
</body>
</html>

垂直布局

image

实现 Demo 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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中 - Center Vertically</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #parent {
            width: 100vw;
            height: 100vh;
            background: #464159;
        }

        #child {
            width: 100px;
            height: 100px;
            background: #fcbad3;
        }

        #parent {
            /*
                display: table-cell 属性，设置当前元素为 <td> 元素（单元格）
                parent 设置为单元格之后，相当于把 child 设置为单元格的文本内容
            */
            display: table-cell;
            /*
                vertical-align 属性，设置文本内容的垂直方向对齐方式
            */
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">垂直居中</div>
</div>
</body>
</html>

实现 Demo 2 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中 - Center Vertically</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #parent {
            width: 100vw;
            height: 100vh;
            background: #464159;
        }

        #child {
            width: 100px;
            height: 100px;
            background: #fcbad3;
        }
    </style>
    <style>
        #parent {
            position: relative;
        }

        #child {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">垂直居中</div>
</div>
</body>
</html>

实现 Demo 3 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中 - Center Vertically</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color:#ffffff;
            width: 100vw;
            height: 100vh;
            background-color: #8ac6d1;
        }

        #container {
            width: 100px;
            height: 100px;
            background-color: #464159;
        }
    </style>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="container">
    垂直居中
</div>
</body>
</html>

水平垂直居中

image
实现 Demo 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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中布局 - Center Vertically And Horizontally</title>
    <style>
        body, h1{
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #parent {
            width: 100vw;
            height: 100vh;
            background: #464159;
        }

        #child {
            width: 200px;
            height: 200px;
            background: #be8abf;
        }

        #parent {
            display: table-cell;
            vertical-align: middle;
        }

        #child {
            display: block;
            margin: 0 auto;
        }
        h1{
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        <h1>完全居中</h1>
    </div>
</div>
</body>
</html>

实现 Demo 2 代码如下：

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="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中布局 - Center Vertically And Horizontally</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #parent {
            width: 100vw;
            height: 100vh;
            background: #ffffd2;
        }

        #child {
            width: 200px;
            height: 200px;
            background: #8ac6d1;
        }

        #parent {
            position: relative;
        }

        #child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        <h3>完全居中</h3>
    </div>
</div>
</body>
</html>

实现 Demo 3 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中布局 - Center Vertically And Horizontally</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #parent {
            width: 100vw;
            height: 100vh;
            background: #ffffd2;
        }

        #child {
            width: 200px;
            height: 200px;
            background: #8ac6d1;
        }

        #parent {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #child {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        <h3>完全居中</h3>
    </div>
</div>
</body>
</html>

单列布局

image

上述图片示例实现代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Single Column Layout - 单列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        header {
            height: 100px;
            line-height: 100px;
            max-width: 960px;
            background-color: #6c7b95;
        }

        main {
            height: 500px;
            line-height: 500px;
            max-width: 960px;
            background-color: #fcbad3;
        }

        footer {
            height: 100px;
            line-height: 100px;
            max-width: 960px;
            background-color: #8ac6d1;
        }

        header, main, footer {
            color: #ffffff;
            text-align: center;
        }
    </style>
    <style>
        header, main, footer {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<header>
    Header
</header>
<main>
    Main
</main>
<footer>
    Footer
</footer>
</body>
</html>

image
上述图片示例实现代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Single Column Layout - 单列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            color: #ffffff;
        }

        header {
            height: 100px;
            background-color: #464159;
        }

        nav {
            height: 100%;
            line-height: 100px;
            max-width: 960px;
            background-color: #8ac6d1;
        }

        main {
            background-color: #fcbad3;
        }

        footer {
            height: 100px;
            line-height: 100px;
            background-color: #6c7b95;
        }
    </style>
    <style>
        main {
            height: calc(100vh - 200px);
            line-height: calc(100vh - 200px);
            max-width: 960px;
            margin: 0 auto;
        }

        nav {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<header>
    <nav>Nav</nav>
</header>
<main>
    Main
</main>
<footer>
    Footer
</footer>
</body>
</html>

image
上述图片示例实现代码如下：

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Single Column Layout - 单列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background: #aa96da;
        }

        nav {
            background: #6c7b95;
            flex: 0 1 60px;
            color: #ffffff;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        main {
            background: #464159;
            flex: 10 1 auto;
            color: #ffffff;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        footer {
            background: #be8abf;
            flex: 0 1 80px;
            color: #ffffff;
        }

        .left {
            background-color: #ffffff;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #be8abf;
        }

        .center {
            background-color: #ffffff;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #be8abf;
        }

        .right {
            background-color: #ffffff;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #be8abf;
        }

        ul {
            margin: 0;
            padding: 0;
            height: 100%;
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        li {
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <nav>
        <div class="left">L</div>
        <div class="center">Title</div>
        <div class="right">R</div>
    </nav>
    <main>
        Main
    </main>
    <footer>
        <ul>
            <li>Home</li>
            <li>Feed</li>
            <li>Me</li>
        </ul>
    </footer>
</div>
</body>
</html>

两列布局

image

实现上述图片示例的代码 Demo 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
56
57
58
59
60
61
62
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>two column layout - 两列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right {
            height: 100%;
            color: #ffffff;
        }

        #left {
            /* 左边容器定宽 */
            width: 150px;
            height: 100vh;
            text-align: center;
            background: #bbded6;
        }

        #right {
            background: #8ac6d1;
        }

        #left {
            /* 当前元素脱离文档流 */
            float: left;
        }

        #right {
            height: 100vh;
            /* 避免遮住左边元素 */
            margin-left: 150px;
        }

        #inner {
            width: 100vw;
            height: 100vh;
            background-color: #fcbad3;
            /* 实现效果兼容性较差，子级元素使用 clear: both 会出现问题 */
            /*clear: both;*/
        }
    </style>
</head>
<body>
<div id="left">
    Left Container
</div>
<div id="right">
    <div id="inner">
        Right Container
    </div>
</div>
</body>
</html>

实现上述图片示例的代码 Demo 2 如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #ffffff;
        }

        #left, #right {
            height: 200px;
            color: #ffffff;
        }

        /* 代码实现分割 */
        #left {
            float: left;
            /* 设置更高层级，显示呈现出左容器 */
            position: relative;
            /* 左边容器定宽 */
            width: 150px;
            height: 100vh;
            background: #bbded6;
        }

        #right {
            float: right;
            /* 左右容器脱离文档流之后，右容器设置 width: 100% 会挤到下一行 */
            width: 100%;
            height: 100vh;
            /* 右容器向左偏移 150px，显示出左容器 */
            margin-left: -150px;
            background: #8ac6d1;
        }

        #main {
            background-color: #aa96da;
            /* 右容器没有设置宽度，子级元素自动撑满父级元素的宽度，需要设置内边距 */
            padding-left: 150px;
            clear: both;
        }
    </style>
    <title>two column layout - 两列布局</title>
</head>
<body>
<div id="left">
    Left Container
</div>
<div id="right">
    <div id="main">
        Right Container
    </div>
</div>
</body>
</html>

实现上述图片示例的代码 Demo 3 如下：

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="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>two column layout - 两列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 150px;
            background: #aa96da;
        }

        #right {
            background-color: #ffffd2;
        }
    </style>
    <style>
        #left {
            float: left;
        }

        #right {
            /* 开启 BFC 模式 - 当前元素的内部环境与外界完全隔离 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="left">

</div>
<div id="right">

</div>
</body>
</html>

实现上述图片示例的代码 Demo 4 如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>two column layout - 两列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            background: #a8d8ea;
        }

        #right {
            background-color: #ffffd2;
        }
    </style>
    <style>
        #container {
            /* 表格的单元格的宽度会自动分配 */
            display: table;
            /* 指定列宽由表格宽度和列宽度决定，自动设置自适应宽度 */
            table-layout: fixed;
            /* 父级元素设置 width: 100% */
            width: 100%;
        }

        #left, #right {
            display: table-cell;
        }

        #left {
            /* 子级元素设置 width: 400px 实现定宽 */
            width: 150px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>
</body>
</html>

三列布局

image

实现上述图片示例的代码 Demo 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
56
57
58
59
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Column Layout - 三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #center {
            width: 200px;
            background-color: #aa96da;
        }

        #right {
            background-color: #464159;
        }
    </style>
    <style>
        #left {
            float: left;
        }

        #center {
            float: left;
        }

        #right {
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="center">
    Center
</div>
<div id="right">
    Right
</div>
</body>
</html>

实现上述图片示例的代码 Demo 2 如下：

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
68
69
70
71
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Column Layout - 三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #center {
            width: 200px;
            background-color: #aa96da;
        }

        #right {
            background-color: #464159;
        }
    </style>
    <style>
        #left {
            float: left;
            position: relative;
        }

        #center {
            float: left;
            position: relative;
        }

        #right {
            float: right;
            width: 100%;
            margin-left: -400px;
        }

        #main {
            background-color: #fcbad3;
            padding-left: 400px;
            height: 50vh;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="center">
    Center
</div>
<div id="right">
    <div id="main">
        Right
    </div>
</div>
</body>
</html>

实现上述图片示例的代码 Demo 3 如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Column Layout - 三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #center {
            width: 200px;
            background-color: #aa96da;
        }

        #right {
            background-color: #464159;
        }
    </style>
    <style>
        #left {
            float: left;
        }

        #center {
            float: left;
        }

        #right {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="center">
    Center
</div>
<div id="right">
    Right
</div>
</body>
</html>

实现上述图片示例的代码 Demo 4 如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Column Layout - 三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            background: #a8d8ea;
        }

        #center {
            background-color: #aa96da;
        }

        #right {
            background-color: #464159;
        }
    </style>
    <style>
        body {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        #left {
            flex: 0 0 200px;
        }

        #center {
            flex: 0 0 200px;
        }

        #right {
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="center">
    Center
</div>
<div id="right">
    Right
</div>
</body>
</html>

多列布局

image
实现上述图片示例代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multi-Column Layout - 多列布局</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        color: #ffffff;
    }

    #col1 {
        background-color: #be8abf;
    }

    #col2 {
        background-color: #ea9abb;
    }

    #col3 {
        background-color: #fea5ad;
    }

    #col4 {
        background-color: #f8c3af;
    }
</style>
<style>
    #parent {
        /*
            column-count: 4;
            column-width: 100px;
        */
        columns: 4 100px;
        /* 设置列的间距 */
        column-gap: 40px;
        /* 设置列的边框 */
        column-rule: #464159 2px solid;
    }

    #parent > div {
        height: 100vh;
    }
</style>
<body>
<div id="parent">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
    <div id="col4"></div>
</div>
</body>
</html>

image
实现上述图片示例代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multi-Column Layout - 多列布局</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        color: #ffffff;
    }

    #col1 {
        background-color: #be8abf;
    }

    #col2 {
        background-color: #ea9abb;
    }

    #col3 {
        background-color: #fea5ad;
    }

    #col4 {
        background-color: #f8c3af;
    }
</style>
<style>
    #parent {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .box {
        flex: 1 1 auto;
        height: 100vh;
    }
</style>
<body>
<div id="parent">
    <div id="col1" class="box"></div>
    <div id="col2" class="box"></div>
    <div id="col3" class="box"></div>
    <div id="col4" class="box"></div>
</div>
</body>
</html>

圣杯布局

image

Demo 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
56
57
58
59
60
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Holy Grail Layout - 圣杯布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #center {
            background-color: #aa96da;
        }

        #right {
            width: 200px;
            background-color: #ffffd2;
        }
    </style>
    <style>
        #left {
            float: left;
        }

        #center {
            margin-left: 200px;
            margin-right: 200px;
        }

        #right {
            float: right;
        }
    </style>
</head>
<body>
<div id="left">

</div>
<div id="right">

</div>
<!-- 同级元素，前面元素浮动后，后面元素可以向前流动；前面元素不浮动，后面元素浮动时，后面元素不向前流动 -->
<div id="center">

</div>
</body>
</html>

Demo 2 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Holy Grail Layout - 圣杯布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #center {
            background-color: #aa96da;
        }

        #right {
            width: 200px;
            background-color: #ffffd2;
        }
    </style>
    <style>
        body {
            display: flex;
            flex-direction: row;
        }

        #left {
            flex: 0 0 200px;
        }

        #center {
            flex: 1 1 auto;
        }

        #right {
            flex: 0 0 200px;
        }
    </style>
</head>
<body>
<div id="left">

</div>

<div id="center">

</div>
<div id="right">

</div>
</body>
</html>

双飞翼布局

image

实现代码如下：

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
68
69
70
71
72
73
74
75
76
77
78
79
80
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Double Wing layout - 双飞翼布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #left, #right, #center {
            color: #ffffff;
            height: 100vh;
        }

        #left {
            width: 200px;
            background: #a8d8ea;
        }

        #right {
            width: 200px;
            background-color: #ffffd2;
        }

        #center {
            background-color: #aa96da;
        }
    </style>
    <style>
        #parent {
            height: 300px;
        }

        #left {
            float: left;
            /* 将当前元素从当前行，移动到上一行同一位置 */
            margin-left: -100%;
        }

        #center {
            float: left;
            /* 设置子级元素为父级元素宽度的 100% */
            width: 100%;
        }

        #right {
            float: left;
            /* 将当前元素从当前行，移动到上一行最右位置 */
            margin-left: -200px;
        }

        #inner {
            height: 300px;
            background-color: #fcbad3;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="center">
        <div id="inner">

        </div>
    </div>
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>
</body>
</html>

等高布局

image

Demo 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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contour Layout - 等高布局</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        color: #ffffff;
    }

    #parent {
        background-color: #6c7b95;
    }

    #left {
        width: 300px;
        background-color: #8bbabb;
    }

    #right {
        width: 300px;
        background-color: #c7f0db;
    }
</style>
<style>
    /* 表格的单元格默认是等高的 */
    #parent {
        display: table;
    }

    #left {
        display: table-cell;
    }

    #right {
        display: table-cell;
    }
</style>
<body>
<div id="parent">
    <!--  需要表格中存在内容填充  -->
    <div id="left">Left</div>
    <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    </div>
</div>
</body>
</html>

Demo 2 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contour Layout - 等高布局</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #parent {
        background-color: #6c7b95;
    }

    #left {
        width: 300px;
        background-color: #8bbabb;
    }

    #right {
        width: 300px;
        background-color: #c7f0db;
    }
</style>
<style>
    /* 并不是实现真正的等高，只是视觉上等高的伪等高布局 */
    #left, #right {
        float: left;
        width: 300px;
        color: #ffffff;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }

    #parent {
        overflow: hidden;
    }
</style>
<body>
<div id="parent">
    <!--  当 right 容器内容不断填充而增高时，left 容器也会跟着 right 同步增高。  -->
    <div id="left">Left</div>
    <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right</div>
</div>
</body>
</html>

等分布局

image

Demo 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
56
57
58
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .column {
            color: #ffffff;
            height: 300px;
            text-align: center;
            /* 实现等分布局的关键代码 */
            float: left;
            width: 25%;
            box-sizing: border-box;
        }

        .column1 {
            background-color: #464159;
        }

        .column2 {
            background-color: #6c7b95;
        }

        .column3 {
            background-color: #8bbabb;
        }

        .column4 {
            background-color: #c7f0db;
        }
    </style>
    <title>Split Layout - 等分布局</title>
</head>
<body>
<div id="container">
    <div class="column column1">
        <p>1</p>
    </div>
    <div class="column column2">
        <p>2</p>
    </div>
    <div class="column column3">
        <p>3</p>
    </div>
    <div class="column column4">
        <p>4</p>
    </div>
</div>
</body>
</html>

Demo 2 代码如下：

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
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            /* 实现等分布局的父级元素属性 */
            display: table;
            width: 100%;
        }

        .column {
            color: #ffffff;
            height: 300px;
            text-align: center;
            /* 实现等分布局的子级元素属性 */
            width: 25%;
            display: table-cell;
        }

        .column1 {
            background-color: #464159;
        }

        .column2 {
            background-color: #6c7b95;
        }

        .column3 {
            background-color: #8bbabb;
        }

        .column4 {
            background-color: #c7f0db;
        }
    </style>
    <title>Split Layout - 等分布局</title>
</head>
<body>
<div id="container">
    <div class="column column1">
        <p>1</p>
    </div>
    <div class="column column2">
        <p>2</p>
    </div>
    <div class="column column3">
        <p>3</p>
    </div>
    <div class="column column4">
        <p>4</p>
    </div>
</div>
</body>
</html>

image
Demo 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #main {
            /* 父级元素向左移动 10 px */
            margin-left: -30px;
        }

        .column {
            color: #ffffff;
            height: 300px;
            text-align: center;
            /* 实现等分布局的关键代码 */
            float: left;
            width: 25%;
            box-sizing: border-box;
            /* 设置白色间距 */
            padding-left: 30px;
        }

        .column1 {
            background-color: #464159;
            height: 300px;
        }

        .column2 {
            background-color: #6c7b95;
            height: 300px;
        }

        .column3 {
            background-color: #8bbabb;
            height: 300px;
        }

        .column4 {
            background-color: #c7f0db;
            height: 300px;
        }
    </style>
    <title>Split Layout - 等分布局 - 带有空白间隙</title>
</head>
<body>
<div id="container">
    <div id="main">
        <div class="column">
            <div class="column1">1</div>
        </div>
        <div class="column">
            <div class="column2">2</div>
        </div>
        <div class="column">
            <div class="column3">3</div>
        </div>
        <div class="column">
            <div class="column4">4</div>
        </div>
    </div>
</div>
</body>
</html>

Demo 2 代码如下：

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
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            overflow: hidden;
            margin-right: -30px;
        }

        #main {
            /* 实现等分布局的父级元素属性 */
            width: 100%;
            display: table;
            margin-left: -30px;
        }

        .column {
            color: #ffffff;
            text-align: center;
            /* 实现等分布局的子级元素属性 */
            display: table-cell;
            /* 实现空白间距 */
            box-sizing: border-box;
            padding-left: 30px;
        }

        .column1 {
            background-color: #464159;
            height: 300px;
        }

        .column2 {
            background-color: #6c7b95;
            height: 300px;
        }

        .column3 {
            background-color: #8bbabb;
            height: 300px;
        }

        .column4 {
            background-color: #c7f0db;
            height: 300px;
        }
    </style>
    <title>Split Layout - 等分布局</title>
</head>
<body>
<div id="container">
    <div id="main">
        <div class="column">
            <div class="column1">1</div>
        </div>
        <div class="column">
            <div class="column2">2</div>
        </div>
        <div class="column">
            <div class="column3">3</div>
        </div>
        <div class="column">
            <div class="column4">4</div>
        </div>
    </div>
</div>
</body>
</html>

全屏布局

image

Demo 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Full Screen Layout - 全屏布局</title>
    <style>
        html, body {
            border: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        header {
            height: 100px;
            background-color: #6c7b95;
            /* 实现固定定位与宽度 */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        footer {
            height: 100px;
            background-color: #fcbad3;
            /* 实现固定定位与宽度 */
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
        }

        main {
            background-color: #8bbabb;
            /* 实现固定定位与宽度 */
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;
            overflow: auto;
        }

        #left {
            width: 300px;
            height: 100%;
            background-color: #ffffd2;
            /* 实现固定定位与宽度 */
            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;
        }

        #right {
            margin-left: 300px;
            height: 100%;
            background-color: orange;
        }
    </style>
</head>
<body>
<header>

</header>
<main>
    <div id="left"></div>
    <div id="right"></div>
</main>
<footer>

</footer>
</body>
</html>

Demo 2 代码如下：

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="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Full Screen Layout - 全屏布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        header {
            background-color: #6c7b95;
            flex: 0 0 100px;
        }

        footer {
            background-color: #fcbad3;
            flex: 0 0 100px;
        }

        main {
            background-color: #8bbabb;
            flex: 1 1 calc(100vh - 200px);
            display: flex;
            flex-direction: row;
        }

        #left {
            flex: 0 0 300px;
            background-color: #ffffd2;
        }

        #right {
            flex: 1 1 auto;
            background-color: orange;
        }
    </style>
    <title>Full Screen Layout - 全屏布局</title>
</head>
<body>
<header>
</header>
<main>
    <div id="left"></div>
    <div id="right"></div>
</main>
<footer>
</footer>
</body>
</html>
七月十五九月初七

七月十五九月初七

人类的悲欢并不相通，我只觉得他们吵闹。