圣杯布局三步曲_html/css_WEB-ITnose

前言

所谓的圣杯布局，就是三列布局中，左右两列宽度固定，中间一列的宽度跟随浏览器的宽度的改变而改变。其实现在已经有其它方法也可以实现这种效果，例如CSS3的width:calc(100% - 100px);（注意：减号左右都是有空格的，不然会报错），只是calc( )值兼容到IE9，这是连IE8都抛弃了的节奏啊。或者是使用less之类的css预编译语言来写样式，也可以轻松达到这种效果。当然也还有其它方法...

实现圣杯布局

先上完整代码，copy下来就能使用了

    
头部 W:100%
中间 W:100%
            
左边 W:400,margin-left:-100%,relative(left:-400)
            
右边 W:300,margin-left:-300,relative(right:300)
        
底部 W:100%

最后的样式图为：

最终样式图

第一步

进行基本布局，设置每个模块的background-color,width，上代码

        
头部 W:100%
中间 W:100%
            
左边 W:400
            
右边 W:300
        
底部 W:100%

效果图为

第一步

第二步

将main、left、right模块设置float为left，并利用margin-left将left与right模块提到与main模块在同一行，上代码

            
头部 W:100%
中间 W:100%
            
左边 W:400,margin-left:-100%
            
右边 W:300,margin-left:-300
        
底部 W:100%

第二步中，设置margin-left的值很重要，结果图为

第二步

第三步

利用main、left、right三个模块的共同content父模块的padding，结合left、right模块的定位，解决第二步中left、right模块将main的部分内容遮盖的问题，上代码

            
头部 W:100%
中间 W:100%
            
左边 W:400,margin-left:-100%,relative(left:-400)
            
右边 W:300,margin-left:-300,relative(right:300)
        
底部 W:100%

啦啦啦，最后的成果图

第三步

虽然都是代码，但是注释里都有写过程的呀

吐槽

纠结了一下午要怎么把自己的图片链接到markdown文就上，想过用围脖是个好图床来的，后面发现不能用了。又想着先上传到围脖，再get到图片链接，不过碍于图片水印中围脖名太那啥，本宝宝有点不好意思拿出手>_

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。