圣杯布局(float + 负margin + padding + position)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>圣杯</title> <style> *{ margin: 0; padding: 0; } .main{ float: left; width: 100%; height: 500px; background:red; } .sub{ position: relative; float: left; left: -200px; width: 200px; height: 500px; margin-left: -100%; background:blue; } .extra{ position: relative; float: left; right: -180px; width: 180px; height: 500px; margin-left: -180px; background:green; } .content{ padding: 0 180px 0 200px; } </style> </head> <body> <!-- 圣杯布局(float + 负margin + padding + position) --> <div class="content"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div> </body> </html>
双飞翼布局(float + 负margin + margin)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .content{ float: left; width: 100%; height: 500px; background:red; } .sub{ float: left; width: 200px; height: 500px; margin-left: -100%; background:blue; } .extra{ float: left; width: 180px; height: 500px; margin-left: -180px; background:green; } .main{ margin: 0 180px 0 200px; } </style> </head> <body> <!-- 双飞翼布局(float + 负margin + margin) --> <div class="content"> <div class="main"></div> </div> <div class="sub"></div> <div class="extra"></div> </body> </html>
flex布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .content{ display: flex; } .sub{ width: 200px; height: 500px; background:blue; } .main{ flex:1; height: 500px; background:red; } .extra{ width: 180px; height: 500px; background:green; } </style> </head> <body> <!-- flex布局 --> <div class="content"> <div class="sub"></div> <div class="main"></div> <div class="extra"></div> </div> </body> </html>
一样效果，不一样的布局。如下：
