CSS中圣杯布局的三列式怎么用

这篇文章给大家介绍CSS的三列式怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

DOM结构如下：

XML/HTML Code复制内容到剪贴板

流程解说
接下来，让我们一步一步地实现圣杯布局；

1、 首先分别浮动main、sub、extra三列， 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：

CSS Code复制内容到剪贴板

1. .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复制内容到剪贴板

1. .container {    padding-left: 210px;    padding-right: 190px;   }

3、 完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：

CSS Code复制内容到剪贴板

1. .sub {    position: relative;    left: -210px;   }   .extra {    position: relative;    rightright: -190px;   }

4、 当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：

CSS Code复制内容到剪贴板

1. 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复制内容到剪贴板

1.                                                      
   头部
                 
              
                  
   主内容栏自适应宽度
              
                
                  
   侧边栏固定宽度
              
          
            
              
                  
   主内容栏自适应宽度
              
                
                  
   侧边栏固定宽度
              
          
            
              
                  
   主内容栏自适应宽度
              
                
                  
   侧边栏1固定宽度
              
                
                  
   侧边栏2固定宽度
              
          
            
              
                  
   主内容栏自适应宽度
              
                
                  
   侧边栏1固定宽度
              
                
                  
   侧边栏2固定宽度
              
          
            
              
                  
   主内容栏自适应宽度
              
                
                  
   侧边栏1固定宽度
              
                
                  
   侧边栏2固定宽度
              
          
                 
   底部
           

圣杯布局的优点总结如下：
1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少。

关于CSS的三列式怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。