1、上下固定，中间自适应的布局
1 <!--flex布局--> 2 <section class="top-center-bottom"> 3 <style type="text/css"> 4 .top-center-bottom{ 5 500px; 6 height:500px; 7 display: flex; 8 flex-direction: column; 9 } 10 .top{ 11 100%; 12 height: 100px; 13 background: yellow; 14 } 15 .bottom{ 16 100%; 17 height: 100px; 18 background: #49a094; 19 } 20 .center{ 21 flex: 1; 22 100%; 23 background: #ff3c4a; 24 } 25 </style> 26 <div class="top">上</div> 27 <div class="center">flex布局 -中</div> 28 <div class="bottom">下</div> 29 </section> 30 <!--grid布局--> 31 <section class="grid-top-center-bottom"> 32 <style type="text/css"> 33 .grid-top-center-bottom{ 34 500px; 35 height:500px; 36 margin-top: 50px; 37 display: grid; 38 grid-template-rows: 100px auto 100px; 39 } 40 .grid-top{ 41 100%; 42 background: yellow; 43 } 44 .grid-center{ 45 100%; 46 background: #ff3c4a; 47 } 48 .grid-bottom{ 49 100%; 50 background: #49a094; 51 } 52 </style> 53 <div class="grid-top">上</div> 54 <div class="grid-center">grid-布局 -中</div> 55 <div class="grid-bottom">下</div> 56 </section> 57 <!--table布局--> 58 <section class="table-top-center-bottom"> 59 <style type="text/css"> 60 .table-top-center-bottom{ 61 500px; 62 height:500px; 63 margin-top: 50px; 64 display: table; 65 } 66 .table-top{ 67 display: table-row; 68 height: 100px; 69 100%; 70 background: yellow; 71 } 72 .table-center{ 73 display: table-row; 74 100%; 75 background: #ff3c4a; 76 } 77 .table-bottom{ 78 display: table-row; 79 height: 100px; 80 100%; 81 background: #49a094; 82 } 83 </style> 84 <div class="table-top">上</div> 85 <div class="table-center">table-布局 -中</div> 86 <div class="table-bottom">下</div> 87 </section>
2、左右布局--左边固定右边自适应或右边固定左边自适应
1 <!--左右布局--> 2 <!--左固定，右自适应或右固定左自适应--> 3 <section class="float-left-right"> 4 <style type="text/css"> 5 .float-left-right{ 6 height: 100px; 7 overflow: hidden; 8 } 9 .float-left{ 10 200px; 11 height: 100px; 12 float: right; 13 background: yellow; 14 } 15 .float-right{ 16 height: 100px; 17 background: #49a094; 18 margin-right: 200px; 19 } 20 </style> 21 <div class="float-left">左</div> 22 <div class="float-right"> 浮动定位---右</div> 23 </section> 24 <section class="absolute-left-right"> 25 <style type="text/css"> 26 .absolute-left-right{ 27 height: 100px; 28 position: relative; 29 margin-top: 50px; 30 } 31 .absolute-left{ 32 200px; 33 height: 100px; 34 background: yellow; 35 position: absolute; 36 top: 0; 37 right: 0; 38 } 39 .absolute-right{ 40 height: 100px; 41 background: #49a094; 42 margin-right: 200px; 43 } 44 </style> 45 <div class="absolute-left">左</div> 46 <div class="absolute-right">绝对定位----右</div> 47 </section> 48 <section class="flex-left-right"> 49 <style type="text/css"> 50 .flex-left-right{ 51 margin-top: 50px; 52 height: 100px; 53 display: flex; 54 } 55 .flex-left{ 56 200px; 57 height: 100px; 58 background: yellow; 59 } 60 .flex-right{ 61 flex: 1; 62 height: 100px; 63 background: #49a094; 64 } 65 </style> 66 <div class="flex-left">左</div> 67 <div class="flex-right">flex 定位----右</div> 68 </section> 69 <section class="grid-left-right"> 70 <style type="text/css"> 71 .grid-left-right{ 72 margin-top: 50px; 73 height: 100px; 74 display: grid; 75 grid-template-rows: 100px; 76 grid-template-columns: 200px auto; 77 } 78 .grid-left{ 79 background: yellow; 80 } 81 .grid-right{ 82 background: #49a094; 83 } 84 </style> 85 <div class="grid-left">左</div> 86 <div class="grid-right">grid 定位----右</div> 87 </section> 88 <section class="table-left-right"> 89 <style type="text/css"> 90 .table-left-right{ 91 margin-top: 50px; 92 100%; 93 height: 100px; 94 display:table; 95 } 96 .table-left{ 97 200px; 98 display: table-cell; 99 background: yellow; 100 } 101 .table-right{ 102 display: table-cell; 103 background: #49a094; 104 } 105 </style> 106 <div class="table-left">左</div> 107 <div class="table-right">table 定位----右</div> 108 </section>