[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> ~~~