圣杯布局

早上到办公室，在某个网站上看到有人问圣杯布局是什么东西，想起来最近一直在写php，没写布局相关前端代码了，就打算花上几分钟的时间写写，写的时候才发现，我本来对这些东西就没有特别深刻的领悟，现在在写突然在十分钟之内居然没有写出来，感觉挺难过。

练练手吧。

圣杯布局是什么样的呢：三列布局，左列和右列都是固定宽度，中间自适应。。

整体思路也就是：父元素main肯定是要有的（当然有些人以body为父级元素也没有问题嘛）----》里边先设置中间的middle部分，设置为其父元素宽高的100%-----》然后再放left和right部分，其width都是固定值，这两个部分因为是在middle之后，为了让他们在一排显示可以设float为left-----》此时的left和right跟在middle之后，为了能是他们在正确的位置，就要用到margin的负值属性，个人觉得负值用好了是个很漂亮的属性：left的margin-left属性设成-100%，此时就会向左偏移了一个middle的宽度，当然这就占据了middle的部分宽度-----》right与left同样的处理方式，但是因为right是紧挨main的右侧，所以向左飘一个它本身的宽度就可以，也就是margin-left为 负的right的宽度---》此时就差不多大功告成，但是还有middle里的content占据100%宽度但是其左右的margin是要设定成left和right的宽度滴。。。

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <style type="text/css">
 5             .main{
 6                 width: 80%;
 7                 height: 300px;
 8             }
 9             .left,.right,.middle{
10                 float: left;
11                 height: 100%;
12             }
13             .middle{
14                 width: 100%;
15                 background-color: gold;
16             }
17             .left{
18                 width: 150px;
19                 margin-left: -100%;
20                 background-color: yellow;
21             }
22             .right{
23                 width: 200px;
24                 margin-left: -200px;
25                 background-color: #ee4311;
26             }
27             .content{
28                 margin:0 200px 0 150px;
29             }
30         </style>
31     </head>
32     <body>
33         <div class="main">
34             
35             <div class="middle">
36                 <div class="content">
37                     middle-content
38                 </div>
39             </div>
40             <div class="left">left</div>
41             
42             <div class="right">right</div>
43         </div>
44     </body>
45 </html>

当然这只是很小很小的一次试水，还有类似的双飞翼、两列响应式等等的布局，都是很有意思的。

posted @ 2015-10-28 16:56  jellyhui  阅读(478)  评论(0)  编辑  收藏  举报