老问题:左右固定值,中间自适应的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)的主要内容,如果未能解决你的问题,请参考以下文章

css实现三列布局,左右固定值,中间自适应。

页面布局方案-左右固定,中间自适应

css自适应布局(两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应)

三列布局_左右固定_中间自适应

两栏布局——左侧固定右侧自适应

css布局1:左右宽度固定中间自适应html布局解决方案(同一侧宽度固定,另一侧自适应)