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 300px; 16 border-left: 1px solid #333; 17 border-bottom: 1px solid #ccc; 18 } 19 .rect1,.rect2,.rect3,.rect4,.rect5 { 20 float: left; 21 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 300px; 19 border-left: 1px solid #333; 20 border-bottom: 1px solid #ccc; 21 } 22 .item { 23 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>