老问题：左右固定值，中间自适应的3格布局（重要的事儿说三遍：position+margin）
Posted To-Infinity-And-Bod
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了老问题：左右固定值，中间自适应的3格布局（重要的事儿说三遍：position+margin）相关的知识，希望对你有一定的参考价值。
老问题：左右固定值，中间自适应的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>
以上是关于老问题：左右固定值，中间自适应的3格布局（重要的事儿说三遍：position+margin）的主要内容，如果未能解决你的问题，请参考以下文章