实现两边定宽，中间自适应1.圣杯布局首先html结构如下<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>圣杯布局</title></head><body> <div class=“content”> <div class=“middle”>2111111111111</div> <div class=“left”>left</div> <div class=“right”>right</div> </div></body></html>css部分<style> *{ margin: 0; padding: 0; } .middle{ background: pink; width: 100%; } .left{ background: blueviolet; width: 200px; } .right{ background: blanchedalmond; width: 200px; } .middle,.left,.right{ height: 100px; }</style>效果如下图，现在我们要让left,和right悬浮在middle两侧我们给middle、left、right都设置float：left,left让它悬浮在左侧设置margin-left:-100%(负的中间元素的宽度),right让它悬浮在右侧设置margin-right:-200px(负的自身的宽度)现在效果如下：.left{ margin-left:-100%; }.right{ margin-left:-200px; }.left,right,.middle{ float:left; }现在要解决的是中间部分被left遮挡住了给.content设置padding左右两边的.left、.right宽度, .left、.right设置相对定位.content{ padding:0 200px; }.left,.right{ position:relative; } .left{ left:-200px; } .right{ right:-200px; }这样可以实现两边定宽，中间自适应完整代码<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>圣杯布局</title> <style> *{ margin: 0; padding: 0; } .content{ padding: 0 200px; } .middle{ background: pink; width: 100%; } .left{ background: blueviolet; width: 200px; margin-left: -100%; left: -200px; } .right{ background: blanchedalmond; width: 200px; margin-left: -200px; right: -200px; } .middle,.left,.right{ height: 100px; float: left; position: relative; } </style></head><body> <div class=“content”> <div class=“middle”>2111111111111</div> <div class=“left”>left</div> <div class=“right”>right</div> </div></body></html>效果图如下:2.双飞翼布局html结构如下<div class=“content”> <div class=“middle”><div>211111111</div></div> <div class=“left”>left</div> <div class=“right”>right</div> </div>css.middle{ width: 100%; background: paleturquoise; height: 200px; float: left; }.middle div{/就是在middle里面添加div设置margin值实现中间自适应/ margin-left: 200px; margin-right: 200px;}.left{ background: palevioletred; width: 200px; height: 200px; float: left; font-size: 40px; color: #fff; margin-left:-100%;}.right{ width: 200px; height: 200px; background: purple; font-size: 40px; float: left; color: #fff; margin-left:-200px;}完整代码<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>双飞翼布局</title> <style> * { margin: 0; padding: 0; } .middle { width: 100%; background: paleturquoise; height: 200px; float: left; } .middle div { margin-left: 200px; margin-right: 200px; } .left { background: palevioletred; width: 200px; height: 200px; float: left; font-size: 40px; color: #fff; margin-left: -100%; } .right { width: 200px; height: 200px; background: purple; font-size: 40px; float: left; color: #fff; margin-left: -200px; } </style></head><body> <div class=“content”> <div class=“middle”> <div>211111111</div> </div> <div class=“left”>left</div> <div class=“right”>right</div> </div></body></html>圣杯布局，双飞翼布局的区别都是两边定宽，中间自适应中间部分放在文档流前面，全部都是设置float:left，区别在于中间部分不被遮挡。双飞翼布局middle里面添加div设置左右的margin值弹性盒布局<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>弹性盒子</title> <style> *{ margin: 0; padding: 0; } body,html{ display: flex; width: 100%; } .content{ display: flex; height: 200px; width: 100%; } .left{ background: blueviolet; height: 200px; } .middle{ background: yellow; flex: 1; } .right{ background: orange; height: 200px; } .left,.right{ width: 200px; } </style></head><body> <div class=“content”> <div class=“left”></div> <div class=“middle”>11111111</div> <div class=“right”></div> </div></body></html>