左右固定，中间自适应布局
Posted yinhao-jack
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右固定，中间自适应布局相关的知识，希望对你有一定的参考价值。
1.使用自身浮动法：
自身浮动法的原理就是对左右分别使用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的值需要小心处理。
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布局：
设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）但是盒模型默认紧紧挨着，可以使用margin控制外边距。middle一定在中间，否则需要order属性来调整。
通过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
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布局教程：
https://www.runoob.com/w3cnote/flex-grammar.html
以上是关于左右固定，中间自适应布局的主要内容，如果未能解决你的问题，请参考以下文章
css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）