首页 > 开发 > CSS > 正文

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

2024-07-11 08:32:52
字体:
来源:转载
供稿:网友

圣杯布局源自 Matthew Levine 在06年的一篇文章,其DOM结构如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">       <div class="main"></div>  
  2.  <div class="sub"></div>    <div class="extra"></div>  
  3. </div>  

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

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

CSS Code复制内容到剪贴板
  1. .main {     float: left;   
  2.  width: 100%;     height: 300px;   
  3.  background-color: rgba(255, 0, 0, .5);    }   
  4. .sub {     float: left;   
  5.  width: 200px;     height: 300px;   
  6.  margin-left: -100%;     background-color: rgba(0, 255, 0, .5);   
  7. }    .extra {   
  8.  float: left;     width: 180px;   
  9.  height: 300px;     margin-left: -180px;   
  10.  background-color: rgba(0, 0, 255, .5);    }  

2、 完成上步后,sub和extra列已经到了正确的位置,但是sub和extra列却覆盖了main的两边,对于这个问题,圣杯布局的解决办法是给容器container添加左、右内边距,从而让main列定位到正确的位置。

CSS Code复制内容到剪贴板
  1. .container {     padding-left: 210px;   
  2.  padding-right: 190px;    }  

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

CSS Code复制内容到剪贴板
  1. .sub {     position: relative;   
  2.  left: -210px;    }   
  3. .extra {     position: relative;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表