老问题：左右固定值，中间自适应的3格布局（重要的事儿说三遍：position+margin）
你是否跟我一样，百度看了答案不知3遍，等到完全自己写一个出来的时候，怎么都不对？float？left？right？width怎么设置都不对的神马鬼？说好的效果呢？
PS：自己总结的一个学习方法，（N步走，化整为零）
1.左边和右边要用定位把他们固定在最左边和最右边；
2.中间的要自适应，都知道是width：XX%；（需要float么？肯定回答：不需要），
3.核心点：用margin-left和margin-right、width：auto结合起来，实现效果！！！
4.是不是非得设置width:auto？可以不写么？如果可以，为什么？自己快测试一波吧！
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>左右固定值，中间自适应的三格布局</title>
6 <style>
7 .main{
8 width: 100%;
9 height: 200px;
10 background-color: #ccc;
11 position: relative;
12 }
13 .left,.right{
14 background-color: #007aff;
15 position: absolute;
16 height: 100%;
17 }
18 .left{
19 left: 0;
20 top: 0;
21 width: 200px;
22 }
23 .right{
24 top: 0;
25 right: 0;
26 width: 300px;
27 }
28 .middle{
29 width: auto;
30 height: 100%;
31 margin: 0 300px 0 200px ;
32 background-color: #2b542c;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="main">
38 <div class="left">left</div>
39 <div class="middle">middle</div>
40 <div class="right">right</div>
41 </div>
42 </body>
43 </html>
时间： 2024-10-28 13:06:34