圣杯(双飞翼)布局

实现一个三列布局  左右固定  中间mainDIV 根据窗体大小而改变

<html>

<head>
    <meta name="description" content="[三列布局 3 Cols]">
    <style type="text/css">
    body {
        margin: 0;
    }
    
    .way1 .left {
        width: 180px;
        height: 200px;
        float: left;
        background: #F39;
    }
    
    .way1 .right {
        width: 200px;
        height: 200px;
        float: right;
        background: #F99;
    }
    
    .way1 .center {
        width: auto;
        height: 200px;
        margin-left: 190px;
        margin-right: 210px;
        background: #C9C;
    }
    
    .way2 {
        padding: 0 150px 0 100px;
    }
    
    .way2 .main {
        float: left;
        height: 200px;
        width: 100%;
        /*将占满父元素的内容区域(padding内的区域)*/
        
        background: #C9C;
    }
    
    .way2 .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        left: -100px;
        position: relative;
        background: #F39;
    }
    
    .way2 .right {
        float: left;
        position: relative;
        height: 200px;
        width: 150px;
        margin-left: -150px;
        /*原本这一行装不下  会到下一行去*/
        /*恰好使这个DIV的开始摆放位置减少150  就和main一行了*/
        
        left: 150px;
        /*虽然是和main一行了 但是main右边有150大小的位置被遮住了*/
        
        background: #F99;
    }
    </style>
</head>

<body>
    <div class="way1">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            这种写法对HTML的顺序有要求
            <p>两个浮动的元素要写在非浮动元素前面</p>
        </div>
    </div>
    <div class="way2">
        <div class="main">圣杯布局(双飞翼布局) 同样对DIV顺序摆放有要求</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

 

posted @ 2015-04-19 23:30  cart55free99  阅读(175)  评论(0)  编辑  收藏  举报