zoukankan      html  css  js  c++  java
  • 圣杯布局

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8"/>
    <title>圣杯布局</title>
    <style type="text/css">
    body{
    background-color:#fff;
    font-size:14px;
    }
    #hd,#ft{
    padding:20px 3px;
    background-color:#ccc;
    text-align:center;
    }
    .bd-lft,.bd-rgt,.bd-3-ll,.bd-3-lr,.bd-3-rr{
    margin:10px 0;
    min-400px;
    }
    .main{
    background-color:#03a9f4;
    color:#fff;
    }
    .aside,.aside-1,.aside-2{
    background-color:#00bcd4;
    color:#fff;
    }
    p{
    margin:0;
    padding:20px;
    text-align:center;
    }

    /*左侧栏固定宽度,右侧自适应*/
    .bd-lft{
    zoom:1;
    overflow:hidden;
    padding-left:210px;
    }
    .bd-lft .aside{
    float:left;
    200px;
    margin-left:-100%;

    position:relative;
    left:-210px;
    _left:0;
    }
    .bd-lft .main{
    float:left;
    100%;
    }

    /*右侧栏固定宽度,左侧自适应*/
    .bd-rgt{
    zoom:1;
    overflow:hidden;
    padding-right:210px;
    }
    .bd-rgt .aside{
    float:left;
    200px;
    margin-left:-200px;

    position:relative;
    right:-210px;
    }
    .bd-rgt .main{
    float:left;
    100%;
    }

    /*左中右 三栏自适应*/
    .bd-3-lr{
    zoom:1;
    overflow:hidden;
    padding-left:210px;
    padding-right:210px;
    }
    .bd-3-lr .main{
    float:left;
    100%;
    }
    .bd-3-lr .aside-1{
    float:left;
    200px;
    margin-left:-100%;

    position:relative;
    left:-210px;
    _left:210px; /*IE6 hack*/
    }
    .bd-3-lr .aside-2{
    float:left;
    200px;
    margin-left:-200px;

    position:relative;
    right:-210px;
    }

    /*都在左边,右侧自适应*/
    .bd-3-ll{
    zoom:1;
    overflow:hidden;
    padding-left:420px;
    }
    .bd-3-ll .main{
    float:left;
    100%;
    }
    .bd-3-ll .aside-1{
    float:left;
    200px;
    margin-left:-100%;

    position:relative;
    left:-420px;
    _left:0px;
    }
    .bd-3-ll .aside-2{
    float:left;
    200px;
    margin-left:-100%;

    position:relative;
    left:-210px;
    _left:210px;
    }

    /*都在右边,左侧自适应*/
    .bd-3-rr{
    zoom:1;
    overflow:hidden;
    padding-right:420px;
    }
    .bd-3-rr .main{
    float:left;
    100%;
    }
    .bd-3-rr .aside-1{
    float:left;
    200px;
    margin-left:-200px;

    position:relative;
    right:-210px;
    }
    .bd-3-rr .aside-2{
    float:left;
    200px;
    margin-left:-200px;

    position:relative;
    right:-420px;
    }
    </style>
    </head>
    <body>
    <div id="hd">头部</div>

    <div class="bd-lft">
    <div class="main">
    <p>主内容栏自适应宽度</p>
    </div>
    <div class="aside">
    <p>侧边栏固定宽度</p>
    </div>
    </div>

    <div class="bd-rgt">
    <div class="main">
    <p>主内容栏自适应宽度</p>
    </div>
    <div class="aside">
    <p>侧边栏固定宽度</p>
    </div>
    </div>

    <div class="bd-3-lr">
    <div class="main">
    <p>主内容栏自适应宽度</p>
    </div>
    <div class="aside-1">
    <p>侧边栏1固定宽度</p>
    </div>
    <div class="aside-2">
    <p>侧边栏2固定宽度</p>
    </div>
    </div>

    <div class="bd-3-ll">
    <div class="main">
    <p>主内容栏自适应宽度</p>
    </div>
    <div class="aside-1">
    <p>侧边栏1固定宽度</p>
    </div>
    <div class="aside-2">
    <p>侧边栏2固定宽度</p>
    </div>
    </div>

    <div class="bd-3-rr">
    <div class="main">
    <p>主内容栏自适应宽度</p>
    </div>
    <div class="aside-1">
    <p>侧边栏1固定宽度</p>
    </div>
    <div class="aside-2">
    <p>侧边栏2固定宽度</p>
    </div>
    </div>

    <div id="ft">底部</div>
    </body>
    </html>

    总的来说圣杯布局就是:加入有三个divABC,BC是包含在A里面的两个并排的div,给定A,padding-left:B的宽度,然后给定B,宽度值,position:relative;right:BC的边距,_right:-BC的边距,margin-right-100%,float:left;然后给定C:postiton:relative,100%;

  • 相关阅读:
    「日常训练」Single-use Stones (CFR476D2D)
    「日常训练」Greedy Arkady (CFR476D2C)
    「Haskell 学习」二 类型和函数(上)
    「学习记录」《数值分析》第二章计算实习题(Python语言)
    「日常训练」Alena And The Heater (CFR466D2D)
    Dubbo 消费者
    Dubbo 暴露服务
    Rpc
    git fail to push some refs....
    Spring Cloud (6)config 客户端配置 与GitHub通信
  • 原文地址:https://www.cnblogs.com/ryt103114/p/6196334.html
Copyright © 2011-2022 走看看