老问题：左右固定值，中间自适应的3格布局（重要的事儿说三遍：position+margin）...

最新推荐文章于 2022-11-25 16:15:01 发布

weixin_30532987

最新推荐文章于 2022-11-25 16:15:01 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/liangliangjiang/p/6213219.html

版权

老问题：左右固定值，中间自适应的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>