<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> *{ padding: 0; margin: 0; } .container{ width: 100%; height: 100%; background-color: red; min-height: 500px; float: left; } .container .center{ margin-left: 200px; margin-right: 150px; background-color: green; } .left{ float: left; width: 200px; height: 100px; background-color: pink; margin-left: -100%; } .right{ float: left; width: 150px; height: 100px; background-color: purple; margin-left: -150px; } </style></head><body></body><div class="container"> <div class="center"> 451 </div></div><div class="left"></div><div class="right"></div></html>主要思想：用container单独包裹center，container宽度设置为100%，里面的center设置宽度为100%，然后设置margin-left:left的宽度，margin-right:right的宽度。container，left，right全部左浮动。left通过设置margin-left：-100%，与container齐平。right通过设置margin-left：-right的宽度（这是与圣杯布局有差异的地方）。使其在container的右边。
来源：https://www.cnblogs.com/hy96/p/11372614.html