左右固定，中间自适应布局

时间 2019-11-08

标签左右固定中间自适应布局栏目 CSS 繁體版

原文原文链接

1.使用自身浮动法：html

自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
该布局法的不足是三个元素的顺序，middle必定要放在最后，middle占据文档流位置，因此必定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行浏览器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <style>
 9     .containter{
10         width:100%;
11         height:200px;
12     }
13     
14     .left{
15         width:300px;
16         height:100%;
17         float: left;
18         background: blue;
19     }
20 
21     .center{
22         height:100%;
23         margin-left: 300px;
24         margin-right: 300px;
25         background: red;
26     }
27     .right{
28         height:100%;
29         width:300px;
30         background: blue;
31         float: right;
32     }
33 
34 </style>
35 <!--中间部分必定要放最后-->
36 <div class="containter">
37     <div class="left"></div>
38     <div class="right"></div>
39     <div class="center"></div>
40 </div>
41 </body>
42 </html>

2.使用绝对定位法：布局

绝对定位法原理是将左右两边使用absolute定位，由于绝对定位使其脱离文档流，后面的middle会天然流动到他们上面，而后使用margin属性，留出左右元素的宽度，既能够使中间元素自适应屏幕宽度。
该法布局的好处，三个div顺序能够任意改变。可是由于是绝对定位，若是页面上还有其余内容，top的值须要当心处理。flex

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <style>
 9     .containter{
10         position: relative;
11         width:100%;
12         height:500px;
13     }
14     .left{
15         position: absolute;
16         top:0;
17         left: 0;
18         width:300px;
19         height:100%;
20         float: left;
21         background: blue;
22     }
23 
24     .center{
25         height:100%;
26         margin-left: 300px;
27         margin-right: 300px;
28         background: red;
29     }
30     .right{
31         position: absolute;
32         top:0;
33         right: 0;
34         height:100%;
35         width:300px;
36         background: blue;
37         float: right;
38     }
39 
40 </style>
41 
42 <div class="containter">
43     <div class="left"></div>
44     <div class="center"></div>
45     <div class="right"></div>
46 </div>
47 </body>
48 </html>

3.使用flex布局：spa

设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）可是盒模型默认牢牢挨着，能够使用margin控制外边距。middle必定在中间，不然须要order属性来调整。 code

经过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不作处理。经过项目属性flex-basis 设置left和right的固定宽度。htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .main{
 8             width:100%;
 9             height:500px;
10             display: flex;
11             flex-direction: row;
12             justify-content: flex-start;
13         }
14 
15         .left{
16             flex:0 1 200px;
17             height:500px;
18             background-color: red;
19         }
20 
21         .middle{
22             flex:1;
23             height:100%;
24             background-color: yellow;
25 
26         }
27 
28         .right{
29             flex:0 1 500px;
30             height:500px;
31             background-color: blue;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="main">
37     <div class="left"></div>
38     <div class="middle"></div>
39     <div class="right"></div>
40 </div>
41 </body>
42 </html>

flex布局教程： blog

https://www.runoob.com/w3cnote/flex-grammar.html教程