页面布局-上中下/左右

 1 <!--flex布局-->
 2 <section class="top-center-bottom">
 3     <style type="text/css">
 4         .top-center-bottom{
 5            width: 500px;
 6            height:500px;
 7            display: flex;
 8            flex-direction: column;
 9         }
10         .top{
11             width: 100%;
12             height: 100px;
13             background: yellow;
14         }
15         .bottom{
16             width: 100%;
17             height: 100px;
18             background: #49a094;
19         }
20         .center{
21             flex: 1;
22             width: 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            width: 500px;
35            height:500px;
36             margin-top: 50px;
37            display: grid;
38             grid-template-rows: 100px auto 100px;
39         }
40         .grid-top{
41             width: 100%;
42             background: yellow;
43         }
44         .grid-center{
45             width: 100%;
46             background: #ff3c4a;
47         }
48         .grid-bottom{
49             width: 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            width: 500px;
62            height:500px;
63             margin-top: 50px;
64            display: table;
65         }
66         .table-top{
67             display: table-row;
68             height: 100px;
69             width: 100%;
70             background: yellow;
71         }
72         .table-center{
73             display: table-row;
74             width: 100%;
75             background: #ff3c4a;
76         }
77         .table-bottom{
78             display: table-row;
79             height: 100px;
80             width: 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>

  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             width: 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             width: 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             width: 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             width: 100%;
 93             height: 100px;
 94             display:table;
 95         }
 96         .table-left{
 97             width: 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>