CSS的三列式圣杯布局方案完全解析.docx

圣杯布局,三列布局,CSS圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM结构如下：XML/HTML Code复制内容到剪贴板div?class=container??????div?class=main/div???div?class=sub/div???div?class=extra/div??/div??流程解说接下来，让我们一步一步地实现圣杯布局；1、首先分别浮动main、sub、extra三列，然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：CSS Code复制内容到剪贴板.main?{ ???float:?left; ???width:?100%; ???height:?300px; ???background-color:?rgba(255,?0,?0,?.5); ??} ??.sub?{ ???float:?left; ???width:?200px; ???height:?300px; ???margin-left:?-100%; ???background-color:?rgba(0,?255,?0,?.5); ??} ??.extra?{ ???float:?left; ???width:?180px; ???height:?300px; ???margin-left:?-180px; ???background-color:?rgba(0,?0,?255,?.5); ??}??2、完成上步后，sub和extra列已经到了正确的位置，但是sub和extra列却覆盖了main的两边，对于这个问题，圣杯布局的解决办法是给容器container添加左、右内边距，从而让main列定位到正确的位置。CSS Code复制内容到剪贴板.container?{ ???padding-left:?210px; ???padding-right:?190px; ??}??3、完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：CSS Code复制内容到剪贴板.sub?{ ???position:?relative; ???left:?-210px; ??} ??.extra?{ ???position:?relative; ???rightright:?-190px; ??}??4、当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：CSS Code复制内容到剪贴板body?{ ???min-width:?600px;?/*?2*sub?+?extra?*/??} ??.container?{ ???padding-left:?210px; ???padding-right:?190px; ??} ??.main?{ ???float:?left; ???width:?100%; ???height:?300px; ???background-color:?rgba(255,?0,?0,?.5); ??} ??.sub?{ ???position:?relative; ???left:?-210px; ???float:?left; ???width:?200px; ???height:?300px; ???margin-left:?-100%; ???background-color:?rgba(0,?255,?0,?.5); ??} ??.extra?{ ???position:?relative; ???rightright:?-190px; ???float:?left; ???width:?180px; ???height:?300px; ???margin-left:?-180px; ???background-color:?rgba(0,?0,?255,?.5); ??}??点击查看在线demo完整实例效果如下：CSS 和 DOM 代码如下：CSS Code复制内容到剪贴板!DOCTYPE?html ??html ??head ??????meta?charset=utf-8 ??????meta?http-equiv=X-UA-Compatible?content=IE=edge,chrome=1 ??????title圣杯布局/title ????????style?type=text/css ??????body?{background-color:?#ffffff;?font-size:14px;} ??????#hd,?#ft?{padding:2