zoukankan      html  css  js  c++  java
  • 两栏三栏自适应布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,body{100%;height:100%;overflow:hidden;}
    html{_height:auto;_padding-top:168px;}
    .g-hd{_margin-top:-168px;}
    .m-mask{position:absolute;top:0;left:0;100%;height:100%;}
    .g-bd{margin: 0.5em 0;height:50px;}
    .g-bd p {
    padding: 1em;
    margin: 0;
    background: #dfedf0;
    }
    /* 两栏三栏自适应布局 */

    /* 两栏布局 主栏左 侧栏右 */
    .g-mn1{float:left;100%;margin-right:-200px;}
    .g-mnc1{margin-right:210px;}
    .g-sd1{float:right;200px;}

    /* 两栏布局 主栏右 侧栏左*/
    .g-mn2{float:right;100%;margin-left:-200px;}
    .g-mnc2{margin-left:210px;}
    .g-sd2{float:left;200px;}

    /* 三栏布局 主栏右 两侧栏左*/
    .g-mn3{float:right;100%;margin-left:-520px;}
    .g-mnc3{margin-left:520px;}
    .g-sd3a{float:left;300px;margin-right:10px;}
    .g-sd3b{float:left;200px;}

    /* 三栏布局 主栏中 两侧栏分居左右*/
    .g-mn4{float:right;100%;margin-left:-200px;}
    .g-mnc4{margin-left:210px;}
    .g-sd4{float:left;200px;}
    .g-mn5{float:left;100%;margin-right:-200px;}
    .g-mnc5{margin-right:210px;}
    .g-sd5{float:right;200px;}
    </style>

    </head>
    <body>
    <h2>两栏布局,左侧自适应,右侧固定</h2>
    <div class="g-bd">
    <div class="g-mn1">
    <div class="g-mnc1">
    <p>主栏1内容区</p>
    </div>
    </div>
    <div class="g-sd1">
    <p>侧栏1内容区</p>
    </div>
    </div>
    <h2>两栏布局,左侧固定,右侧自适应</h2>
    <div class="g-bd">
    <div class="g-mn2">
    <div class="g-mnc2">
    <p>主栏2内容区</p>
    </div>
    </div>
    <div class="g-sd2">
    <p>侧栏2内容区</p>
    </div>
    </div>
    <h2>三栏布局,两侧固定,中间自适应</h2>
    <div class="g-bd">
    <div class="g-mn4">
    <div class="g-mnc4">
    <div class="g-mn5">
    <div class="g-mnc5">
    <p>主栏5内容区</p>
    </div>
    </div>
    <div class="g-sd5">
    <p>侧栏5内容区</p>
    </div>
    </div>
    </div>
    <div class="g-sd4">
    <p>侧栏4内容区</p>
    </div>
    </div>
    <h2>三栏布局,右侧自适应,左边,中间固定</h2>
    <div class="g-bd">
    <div class="g-mn3">
    <div class="g-mnc3">
    <p>主栏3内容区</p>
    </div>
    </div>
    <div class="g-sd3a">
    <p>侧栏a内容区</p>
    </div>
    <div class="g-sd3b">
    <p>侧栏b内容区</p>
    </div>
    </div>

    </body>
    </html>

  • 相关阅读:
    设计模式(一)基础面向对象
    面试题之三门问题
    「巫师3(The Witcher 3:Wild Hunt)」游戏测评
    欧拉角和四元数
    struts标签遍历各种list Map
    浅谈HtmlCleaner+XPath解析html或者xml
    hadoop简单例子
    解决JSP参数传递乱码的问题
    Set、List、Map的区别(浅谈)
    做个犀利的码农
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6268881.html
Copyright © 2011-2022 走看看