本文详细介绍了一种名为“圣杯布局”的网页布局技巧，通过浮动、负边距和相对定位实现两端固定中间自适应的布局效果。文章通过具体的HTML和CSS代码示例，展示了如何创建这种布局，适用于前端开发者学习和应用。
圣杯布局：两端固定中间自适应
圣杯布局：大的div设置padding-left和padding-right，左右两个div用相对布局position:relative，加上right和left属性
HTML布局如下：
CSS布局如下：
现在的样子如下：
圣杯布局详情：
1、给 .main .left .right 分别加上float:left
2、然后：.left{margin-left:-100%};让left跑到上面的左边 .right{margin-left:-200px};right宽200px，让它跑到上面最右边
3、相对定位position:relative .left{position:relative;left:-210px} left往左移动210px .right{position:relative;right:-210px;} right往右移动210px
效果图如下：
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
