圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> #box{ padding:0 200px 0 100px; height:100px; } #middle{ float:left; width:100%; height:100px; background:blue; } #left{ float:left; width:100px; height:100px; margin-left:-100%; background:#0c9; position:relative; left:-100px; } #right{ float:left; width:200px; height:100px; margin-right:-100%; background:#0c9; } </style> </head> <body> <div id="box"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div> </body> </html>
双飞翼布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style type="text/css"> #box { height: 100px; } #middle { float: left; width: 100%; height: 100px; background: blue; } #inside{ margin:0 200px 0 100px; height:100px; } #left { float: left; width: 100px; height: 100px; margin-left: -100%; background: #0c9; } #right { float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; } </style> </head> <body> <div id="box"> <div id="middle"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div> </div> </body> </html>