html布局之圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <link href="buju1.css" type="text/css" rel="stylesheet"/> </head> <body> <<div class="container"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div> </body> </html>
CSS
body { min-width: 600px; /* 2*sub + extra */ } .container { padding-left: 210px; padding-right: 190px; } .main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { position: relative; right: -190px; float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }
样式布局之双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link href="buju.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="main-wrapper"> <div class="main"></div> </div> <div class="sub"></div> <div class="extra"></div> </body> </html>
css
.main-wrapper { float: left; width: 100%; } .main { height: 300px; margin-left: 210px; margin-right: 190px; background-color: rgba(255, 0, 0, .5); } .sub { float: left; width: 200px; height: 300px; margin-left: -100%;//这个地方要注意了margin-left设置为负值得话，位置往左移动，当移出这一行时，就会跑到上一行去，然后继续往左移动，如果margin-left设置为正值的话，位置就会往右移动，并且会一直往右动，并不会跳到下一行去。 background-color: rgba(0, 255, 0, .5); } .extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }