[TOC] # 双飞翼 ~~~ <style type="text/css"> div { padding: 0px; margin: 0px; } .container { min-width: 400px; background: #eee; height: 200px; } .left, .right { width: 200px; height: 200px; background: red; float: left; } .main { width: 100%; height: 200px; background: blue; float: left; } .left { margin-left: -100%; } .right { margin-left: -200px; } .main_w { margin: 0px 200px; } </style> <!-- 容器 --> <div class="container"> <div class="main"> <div class="main_w"> 中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间1栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中1间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏</div> </div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div> ~~~ # 圣杯布局 ~~~ <style type="text/css"> div{ padding:0px; margin:0px; } .container{ min-width: 400px; background: #eee; height: 200px; padding: 0px 200px; } .left,.right{ width: 200px; height: 200px; background: red; float: left; } .main{ width:100%; height: 200px; background: blue; float: left; } .left{ margin-left:-100%; position: relative; left: -200px; } .right{ margin-left:-200px; position: relative; right: -200px; } </style> <!-- 容器 --> <div class="container"> <div class="main">中间栏</div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div> ~~~