css的聖杯布局
阿新 • • 發佈:2017-05-28
log lan pos position scale har main con ack
聖杯布局和雙飛翼布局實現的效果是一樣的。
代碼解析:
1.四個section,container,main,left,right。其中那個container為父容器。
2.main,left,right均左浮動。
3.main的寬度為100%。
4.設置left的margin:-100%。
5.設置rightd margin:-200px;
6.設置父容器的內邊距padding:0px 200px 0px 200px。
7.設置left的positon:relative;left:-200px.
8.設置right的position:relative:right;right:-200px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { min-width: 700px; } #container { padding: 0px 200px 0px 200px; } #main { height: 200px; width: 100%; float: left; background-color: rebeccapurple; word-break: break-all; } #left { height: 200px; width: 200px; float: left; background-color: gold; margin-left: -100%; position: relative; left: -200px; } #right { height: 200px; width: 200px; float: left; background-color: firebrick; margin-left: -200px; position: relative; right: -200px; } </style> </head> <body> <section id="container"> <section id="main"> gfdgdfg gdfgfdg gfdgdfg gdfgfdggfdgdfg gdfgfdggfdgdfg gdfgfdg </section> <section id="left"></section> <section id="right"></section> </section> </body> </html>
css的聖杯布局