zoukankan      html  css  js  c++  java
  • 左栏固定,右栏自适应完美兼容版 Fred

    网上找了很多流体布局的代码,五花八门,没有很完美的兼容版本。正好有个朋友是做前端设计的,他给了我携程网的css布局代码,我试了下,很完美,兼容ie6/7/8/ff3+浏览器。今天与大家分享下!
    <BODY id=mainbody>
    <div id="base_wrapper">
      
    <div id="base_bd" class="base_t1">
        
    <div id="base_main">
          
    <div class="base_b"> body </div>
        
    </div>
        
    <div class="base_b"  style="background:#000;"> left </div>
      
    </div>
    </div>
    </BODY>
    css:
    #base_wrapper {
        PADDING-RIGHT
    : 20px;
        PADDING-LEFT
    : 20px;
        PADDING-BOTTOM
    : 10px;
        MARGIN
    : 0px auto;
        WIDTH
    : 950px;
        PADDING-TOP
    : 10px;
        min-width
    : 1000px;
        max-width
    : 1250px
    }
    #base_main 
    {
        WIDTH
    : 100%
    }
    #base_main .base_b 
    {
        FLOAT
    : none;
        WIDTH
    : auto
    }
    .base_t1 #base_main 
    {
        FLOAT
    : right;
        MARGIN-LEFT
    : -166px
    }
    .base_t2 #base_main 
    {
        FLOAT
    : right;
        MARGIN-LEFT
    : -168px
    }
    .base_t3 #base_main 
    {
        FLOAT
    : left;
        MARGIN-RIGHT
    : -166px
    }
    .base_t1 .base_b 
    {
        PADDING-RIGHT
    : 6px;
        PADDING-LEFT
    : 6px;
        FLOAT
    : left;
        PADDING-BOTTOM
    : 6px;
        WIDTH
    : 154px;
        PADDING-TOP
    : 6px;
    }
    .base_t1 #base_main .base_b 
    {
        MARGIN-LEFT
    : 166px
    }
    .base_t2 .base_b 
    {
        FLOAT
    : left;
        WIDTH
    : 166px
    }
    .base_t2 #base_main .base_b 
    {
        MARGIN-LEFT
    : 176px
    }
    .base_t3 .base_b 
    {
        PADDING-RIGHT
    : 6px;
        PADDING-LEFT
    : 6px;
        FLOAT
    : right;
        PADDING-BOTTOM
    : 6px;
        WIDTH
    : 154px;
        PADDING-TOP
    : 6px
    }
    .base_t3 #base_main .base_b 
    {
        MARGIN-RIGHT
    : 166px
    }
    #base_bd:unknown 
    {
     CLEAR
    : both;
    DISPLAY
    : block;
    VISIBILITY
    : hidden;
    HEIGHT
    : 0px;
    content
    : "."
    }
    #base_bd 
    {
        ZOOM
    : 1
    }
  • 相关阅读:
    php Date()函数输出中文年月日时分秒
    jQuery动态添加删除与添加表行代码
    sql随机查询数据语句(NewID(),Rnd,Rand(),random())
    asp.net 逻辑操作符与(&&),或(||),非(!)
    php static 变量的例子
    asp.net C# int 类型在32/64位环境下取值范围无变化
    js保留小数点后N位的方法介绍
    [Java] LinkedHashMap 源码简要分析
    [Java] HashMap 源码简要分析
    [Java] Hashtable 源码简要分析
  • 原文地址:https://www.cnblogs.com/Fred_Xu/p/1544171.html
Copyright © 2011-2022 走看看