：
<!DOCTYPE html><html><head><title>聖杯</title><style>.container{ padding:0 200px 0 180px; height:100px;}.left{ float:left; width:180px; height:100px; margin-left:-100%; background:red; position:relative; left:-180px;}.main{ float:left; width:100%; height:100px; background:blue;}.right{ float:left; width:200px; height:100px; margin-left:-200px; background:green; position:relative; right:-200px;}</style></head><body><div> <div>middle</div> <div>left</div> <div>right</div></body>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>雙飛翼</title> <style>.main{ float:left; width:100%;/*左欄上去到第一行*/ height:100px; background:blue;}.left{ float:left; width:180px; height:100px; margin-left:-100%; background:red;}.right{ float:left; width:200px; height:100px; margin-left:-200px; background:green;}</style></head><body> <div></div> <div>left</div> <div>right</div></body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Flex</title> <style>.flex { display: flex; flex-flow: row;}.left{ width: 180px; height: 100px; background-color: red;}.main{ flex: 1; height: 100px; background-color: blue;}.right { width: 200px; height: 100px; background-color: green;} </style></head><body><div> <div>left</div> <div>middle</div> <div>right</div></div></body></html>
如果main要給左邊的left模組和右邊的right模組都讓出一定寬度來的話，只有padding：0 100px 0 200px;或者margin：0 100px 0 200px;這兩種方式！
這兩條路線：
如果走margin路線， 一路走下去，你會發現最後你寫出的代碼就是雙飛翼；
如果走padding路線，那就是聖杯！
相關文章推薦：
css實現三欄布局的三種方式（附代碼）
如何使用CSS實現過山車loader的動畫效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
