圣杯布局和双飞翼布局的实现

圣杯布局：

<div id="app"> <div class="center">中间</div> <div class="left">左边</div> <div class="right">右边</div> </div> #app { margin: 0 200px; } .center { float: left; width: 100%; height: 500px; background-color: red; } .left { float: left; width: 200px; height: 500px; margin-left: -100%; background-color: yellow; position: relative; left: -200px; } .right { float: left; width: 200px; height: 500px; margin-left: -200px; background-color: green; position: relative; left: 200px; }

双飞翼布局：

<div id="app"> <div class="center"> <div class="inside">中间</div> </div> <div class="left">左边</div> <div class="right">右边</div> </div> .center { float: left; width: 100%; height: 500px; background-color: red; } .inside { margin: 0 200px; } .left { float: left; width: 200px; height: 500px; margin-left: -100%; background-color: yellow; } .right { float: left; width: 200px; height: 500px; margin-left: -200px; background-color: green; }