布局思路：
外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定，中间宽度自适应。中间栏优先渲染。
1.基本布局
外面一个大div，里面三个小div。注意中间栏写在前面，优先渲染。
2.外面大div设置左右padding值，分别是左右两栏的宽度(两栏之间若有空隙可适当增加margin值)。中间的width让Main全部充满。由于Main占据整个父元素width，Left和Right则被挤到下一行显示(注意此时Left和Main是对齐的)。
CSS如下：
效果如下：
3.将左右两栏移至上一行，此时要用到margin-left的负值效果。
代码如下：
此时Left和Right分别移到了Main的首尾位置。(此时的字母Main已看不见)
效果如下：
4.由于此时的Left和Right都遮挡住了部分Main，所以还需要做调整。用position:relative来进行微调。
代码如下：
也可以用负值：
#left {position:relative;left:-200px;}
#right {position:relative;right:-200px;}
效果如下：
此时圣杯布局完成。
资料参考：https://blog.csdn.net/yinmazuo/article/details/50218657
http://cnodejs.org/topic/56d70d5f4dfa4031185aabbf
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2283.html
摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 解决的问题 圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局 圣杯布局dom结构： 圣杯布局 ...
摘要：圣杯布局与双飞翼的比较项目实验在对百分比布局和圣杯布局有了一定了解以后，我呢写了一个将这两个联系在一起，没有，只有。 最近在开发一个简单的页面的时候，需要给页面去做一个布局，具体部分就是头部header和内容区域。这里有一个要求就是头部定好宽度以后，需要让container占有整个屏幕，那最好的办法就是直接计算页面的高度，然后减去header的高度，即可得到container的高度。可...
摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。 前言 我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...
阅读 2483·2023-04-25 18:13
阅读 742·2021-11-22 12:10
阅读 2957·2021-11-22 11:57
阅读 2097·2021-11-19 11:26
阅读 2107·2021-09-22 15:40
阅读 1382·2021-09-03 10:28
阅读 2634·2019-08-30 15:53
阅读 1862·2019-08-30 15:44
