首先两者都是两边宽度固定，中间宽度自适应，并且中间盒子(主题内容)放在最前面，以便优先渲染。

实现方案：都使用浮动来实现。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

圣杯布局实现如下：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>圣杯布局</title>     <style>         .box{             padding: 0 100px;             height: 400px;         }         .center,         .left,         .right{             float: left;             height: 100%;         }         .left,         .right{             position: relative;         }         .center{             width: 100%;             background: #333;         }         .left{             width: 100px;             background: #f8f8f8;             margin-left: -100%; /*为了使元素移到上一行，margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内*/             left: -100px;         }         .right{             width: 100px;             background: #ccc;             margin-left: -100px;             right: -100px;         }     </style> </head> <body>     <div class="box">         <div class="center"></div>         <div class="left"></div>         <div class="right"></div>     </div> </body> </html>    flex实现圣杯布局： <!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>Document</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; display: flex; /* 改变主轴的排列方式 */ flex-direction: column; justify-content: space-between; text-align: center; font-size: 25px; } .footer, .header { height: 88px; background: #c33; text-align: center; line-height: 88px; font-size: 30px; } .center { flex: 1; background: #ccc; display: flex; } .center>.left,.center>.right { width: 200px; height: 100%; background: yellow; } .center>.content { flex: 1; background: pink; } </style> </head> <body> <div class="header">header</div> <div class="center"> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> </html>   双飞翼布局实现如下： <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>双飞翼布局</title>     <style>         .box{             height: 400px;             overflow: hidden;         }         .main-box,         .left,         .right{             float: left;             height: 100%;         }         .center{             margin-left: 100px;             margin-right: 100px;         }         .main-box{             width: 100%;             background: #333;         }         .left{             width: 100px;             background: #f8f8f8;             margin-left: -100%;         }         .right{             width: 100px;             background: #ccc;             margin-left: -100px;         }     </style> </head> <body>     <div class="box">         <div class="main-box"><div class="center"></div></div>           <div class="left"></div>         <div class="right"></div>     </div> </body> </html>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄