CSS圣杯布局（三栏布局）

来源：互联网发布：数组转化为json字符串编辑：程序博客网时间：2024/04/30 19:04

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。三栏全部float:left浮动，并配合left和right属性。

原理（1.浮动2.负边距）：

负边距 margin-left为负值，且两个元素不在一行的时候（可以用元素float:left,width:100%实现）margin-left可以吃掉兄弟元素的margin.想像一下，假设width:99%，右边留一条缝隙，当margin-left为负值，即可让右边的这条缝隙向左走

即当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。而margin的负值达到-100%时，恰能达到窗口最左侧。。

这个100%为父元素的宽度。同理我们假设要挤的元素宽度为200px,则 “挤”200px就可以让这个元素完全挤到兄弟元素的右边去。（摘自http://99jty.com/?p=432）

代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>圣杯布局</title>    <style type="text/css">        *{            margin: 0;padding: 0;}        body{            min-width: 700px;}        h3{            padding:0 20px}    .header{        width: 100%;        height: 40px;        background-color: #646464;    }    .footer{        width: 100%;        height: 40px;        margin-top: 300px;        background-color: #646464;    }    .middle{        float: left;        width: 100%;        height: 300px;        text-align: center;        background-color: #ffd36a;    }     .left{        float:left;        width: 200px;        height: 300px;        margin-left: -100%;        background-color: #ff63bd;        }     .right{         float: left;         width: 200px;         height: 300px;         margin-left: -200px;         background-color: #a2ff95;        }    </style></head><body><div class="header">    <h3>header</h3></div><div class="middle">    <h3>middle</h3></div><div class="left">    <h3>left</h3></div><div class="right">    <h3>right</h3></div><div class="footer">    <h3>footer</h3></div></body></html>

阅读全文

0 0