圣杯布局
<style> .wraper{ padding: 0 200px 0 100px; overflow: hidden; } .main, .left, .right{ text-align: center; height: 100px; float: left; } .main{ width: 100%; background-color:skyblue; } .left{ width: 100px; margin-left: -100%; background-color: wheat; position: relative; left: -100px; } .right{ width: 200px; margin-left: -200px; background-color: thistle; position: relative; right: -200px; } </style>
<div class="wraper">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼布局
<style> .main, .left, .right{ height: 100px; float: left; } .main{ width: 100%; background-color:skyblue; } .main-content{ margin: 0 200px 0 100px; } .left{ width: 100px; margin-left: -100%; background-color: wheat; } .right{ width: 200px; margin-left: -200px; background-color: thistle; } </style>
<div class="wraper">
<div class="main">
<div class="main-content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
