圣杯布局
html：
center
left
right
登录后复制
css:
#container { padding: 0 100px 0 200px;/*左宽度为200px 右边宽度为100px*/}.col { float: left; position: relative; height: 300px;}#center { width: 100%; background: #eee;}#left { width: 200px; background: blue; margin-left: -100%; right: 200px;}#right { width: 100px; background: red; margin-right: -100px;}
登录后复制
效果如图：
双飞翼布局
html：
center
left
right
登录后复制
css:
.col { float: left; height: 300px;}#center { width: 100%; background: #eee;}#left { width: 200px; background: blue; margin-left: -100%;}#right { width: 100px; background: red; margin-left: -100px;}#center .wrap { margin: 0 100px 0 200px;}
登录后复制
效果如图：
两种布局的区别
这两种布局实现的都是两边固定宽度，中间自适应，中间栏放在最前面优先渲染。
不同的是，双飞翼布局多创建一个包裹的p，去掉了相对定位，css相对少写一些。
个人认为圣杯布局结构更简洁，平常工作中就看大家自己的选择了。
更多关于圣杯布局和双飞翼布局 相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2836388.html
