CSS实例（二）浅析圣杯布局和双飞翼布局

　　很早之前就听说过圣杯布局，但是没有花时间去研究，这次百度前端学院的任务中正好有关于布局的，我就花了些时间研究了一下经典的布局。

　　所谓圣杯布局就是一个三栏式布局，左右两边宽度固定，中间一栏的宽度自适应。

　　首先是基本的HTML代码：

1 <div id="container">
2         <div id="c_left"></div>
3         <div id="medium"></div>
4         <div id="c_right"></div>
5     </div>

　　第一步：实现基本的布局

CSS实例（二）浅析圣杯布局和双飞翼布局

1 #container{
2         padding-left:200px;
3         padding-right: 150px;
4     }

　　第二步：设置好每一个div的宽度，添加浮动属性。

CSS实例（二）浅析圣杯布局和双飞翼布局

 1 #medium{
 2         position: relative;
 3         float: left;
 4         width: 100%;
 5         height: 200px;
 6         background-color: #3c3;
 7         
 8     }
 9     #c_left{
10         position: relative;
11         float: left;
12         width: 200px;
13         height: 200px;
14         background-color: #333;
15     }
16     #c_right{
17         position: relative;
18         float: left;
19         width: 150px;
20         height: 200px;
21     }

　　第三步：将left块级元素浮动到如下图所示的位置上

CSS实例（二）浅析圣杯布局和双飞翼布局

1 #c_left{
2         position: relative;
3         float: left;
4         width: 200px;
5         height: 200px;
6         background-color: #333;
7         margin-right: -100%;  //也可能会是margin-left,调试一下就知道了
8         left: -200px;
9     }

　　第四步：将right块级元素浮动至下图所示位置

CSS实例（二）浅析圣杯布局和双飞翼布局

1 #c_right{
2         position: relative;
3         float: left;
4         width: 200px;
5         height: 200px;
6         margin-right: -200px;
7         background-color: #333;
8     }

　　最后一步就是设置页面的最小宽度，由于中间层是流式的，当窗口大小缩小到350px的时候，中间部分就没有了，所以应该给#container设置一个最小宽度

1 #container{
2         min-width: 600px;
3     }

　　至此，圣杯布局就大功告成了。当然在本例中，200px和150px是可变参数，可以任意设置。

　　本例没有考虑兼容性，可能在IE6及以下版本会出现问题。

　　圣杯布局虽然现在用的并不多，但是是一个很经典的例子。

　　下面给出完整的CSS代码：

 1 #container{
 2         min-width: 600px;
 3     }
 4     #container{
 5         padding-left:200px;
 6         padding-right: 200px;
 7     }
 8     #medium{
 9         position: relative;
10         float: left;
11         width: 100%;
12         height: 200px;
13         background-color: #3c3;
14     }
15     #c_left{
16         position: relative;
17         float: left;
18         width: 200px;
19         height: 200px;
20         background-color: #333;
21         margin-right: -100%;  //可能是margin-left
22         left: -200px;
23     }
24     #c_right{
25         position: relative;
26         float: left;
27         width: 200px;
28         height: 200px;
29         margin-right: -200px;
30         background-color: #333;
31     }

　　在此基础上，还有双飞翼布局，主要区别就是不用容器，只需在处于中间位置的div中加一个标签来控制中间栏的宽度。

　　HTML代码如下：

1 <div  class="middle">
2     <div  class="medium"></div>
3 </div>
4 <div  class="left"></div>
5 <div  class="right"></div>

　　CSS代码如下：

 1 .middle{
 2         float:left;
 3         width:100%;
 4         height:200px;
 5         background-color:#ccc;
 6 }
 7 .left{
 8         float:left;
 9         width:200px;
10         height:200px;
11         background-color:#b3d9d9;
12         margin-left:-100%;
13 }
14 .right{
15         float:left;
16         width:200px;
17         height:200px;
18         background-color:#b3d9d9;
19         margin-left:-200px;
20 }

转载于:https://www.cnblogs.com/suvllian/articles/5321944.html

CSS实例（二）浅析圣杯布局和双飞翼布局

相关推荐