高度已知，写出三栏布局 左右各为300px 中间自适应

高度已知，写出三栏布局 左右各为300px 中间自适应

 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   <title>三栏布局</title>
 7   <style>
 8     * {
 9       padding: 0;
10       margin: 0;
11     }
12     ul {
13       margin-bottom: 20px;
14       height: 100px;
15     }
16     li {
17       list-style: none;
18       height: 100px;
19     }
20     li.l {
21       width: 300px;background-color: red;
22     }
23     li.r {
24       width: 300px;background-color: blue;
25     }
26     li.c {
27       background-color: blueviolet;
28     }
29   </style>
30 </head>
31 <body>
32   <!-- 高度已知，写出三栏布局 左右各为300px 中间自适应 -->
33   <!-- flexbox弹性布局 -->
34   <ul style="display: flex;">
35     <li class="l"></li>
36     <li class="c" style="flex: 1;"></li>
37     <li class="r"></li>
38   </ul>
39 
40   <!-- BFC布局 浮动-->
41   <ul style="overflow: hidden;">
42     <li class="l" style="float: left;"></li>
43     <li class="c" style="float: left;width: calc(100% - 600px)"></li>
44     <li class="r" style="float: right;"></li>
45   </ul>
46 
47   <!-- position定位 -->
48   <ul style="position: relative;">
49     <li class="l" style="position: absolute;left: 0;"></li>
50     <li class="c" style="position: absolute;left: 300px;right: 300px;"></li>
51     <li class="r" style="position: absolute;right: 0;"></li>
52   </ul>
53 
54   <!-- 栅格化网格布局 -->
55   <ul style="display: grid; grid-template-columns: 300px auto 300px; grid-template-cols: 100px;">
56     <li class="l"></li>
57     <li class="c"></li>
58     <li class="r"></li>
59   </ul>
60 
61   <!-- 表格布局 table是行类元素 需要设置宽度 -->
62   <ul style="display: table; width: 100%;">
63     <li class="l" style="display: table-cell;"></li>
64     <li class="c" style="display: table-cell;"></li>
65     <li class="r" style="display: table-cell;"></li>
66   </ul>
67   
68 </body>
69 </html>

 

 

posted @ 2021-04-05 13:22  水晴  阅读(50)  评论(0)    收藏  举报