首页 > 代码库 > css的圣杯布局
css的圣杯布局
圣杯布局和双飞翼布局实现的效果是一样的。
代码解析:
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的圣杯布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。