1.圣杯布局
整体思路：
中间列放在最前优先加载，并设置宽度100%自适应；
三列都向左浮动 (此时左右列在下面一行，因为中间列占100%)；
左列设置margin-left：-100%，右列设置margin-left:-宽度，使左右列与中间列同行 (此时左右列会遮挡中间列内容)；
给最外部container设置padding：0 左列宽度 0 右列宽度 ；
给左右列设置position：relative，分别向左向右移动-自身宽度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container { overflow: hidden; padding: 0 200px 0 100px; } .main,.left,.right { position: relative; min-height: 200px; float: left; } .main { width: 100%; background-color: #8A2BE2; } .left { left: -100px; margin-left: -100%; width: 100px; background-color: #ADD8E6; } .right { right: -200px; margin-left: -200px; width: 200px; background-color: #FFB6C1; } </style> </head> <body> <div id="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
2.双飞翼布局
思路：
整体思路与圣杯布局大致相同，不同点在于处理左右列遮挡中间列；
双飞翼布局通过给中间列内再嵌套一个div，给该div设置margin：0 右列宽度 0 左列宽度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container { overflow: hidden; } .main,.left,.right { min-height: 200px; float: left; } .main width: 100%; background-color: #8A2BE2; } .main-content { margin: 0 200px 0 100px; } .left { margin-left: -100%; width: 100px; background-color: #ADD8E6; } .right { margin-left: -200px; width: 200px; background-color: #FFB6C1; } </style> </head> <body> <div id="container"> <div class="main"> <div class="main-content">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
原文：https://www.cnblogs.com/LangZ-/p/13375011.html