1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 body {
10 margin:0 10px;
11 padding:0;
12 }
13 #box {
14 height: 300px;
15 width: 300px;
16 border-left: 1px solid #333;
17 border-bottom: 1px solid #ccc;
18 }
19 .rect1,.rect2,.rect3,.rect4,.rect5 {
20 float: left;
21 width: 40px;
22 margin-left: 15px;
23 }
24 .rect1 {
25 height: 30%;
26 margin-top: 70%;
27 background-color: #f00;
28 }
29 .rect2 {
30 height: 80%;
31 margin-top: 20%;
32 background-color: #ddd;
33 }
34 .rect3 {
35 height: 70%;
36 margin-top: 30%;
37 background-color: #0fd;
38 }
39 .rect4 {
40 height: 60%;
41 margin-top: 40%;
42 background-color: #ff0;
43 }
44 .rect5 {
45 height: 90%;
46 margin-top: 10%;
47 background-color: #234;
48 }
49 </style>
50 </head>
51 <body>
52 <div id="box">
53 <div class="rect1"></div>
54 <div class="rect2"></div>
55 <div class="rect3"></div>
56 <div class="rect4"></div>
57 <div class="rect5"></div>
58 </div>
59 </body>
60 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 body {
10 margin:0 10px;
11 padding:0;
12 }
13 #box {
14 justify-content: space-evenly;
15 display: flex;
16 align-items: flex-end;
17 height: 300px;
18 width: 300px;
19 border-left: 1px solid #333;
20 border-bottom: 1px solid #ccc;
21 }
22 .item {
23 width:14%;
24 }
25 .rect1 {
26 height: 30%;
27 background: #f00;
28 }
29 .rect2 {
30 height: 80%;
31 background: #ddd;
32 }
33 .rect3 {
34 height: 70%;
35 background: #0fd;
36 }
37 .rect4 {
38 height: 60%;
39 background: #ff0;
40 }
41 .rect5{
42 height: 90%;
43 background: #234;
44 }
45 </style>
46 </head>
47 <body>
48 <div id="box">
49 <span class="item rect1"></span>
50 <span class="item rect2"></span>
51 <span class="item rect3"></span>
52 <span class="item rect4"></span>
53 <span class="item rect5"></span>
54 </div>
55 </body>
56 </html>
