左栏固定，右栏自适应完美兼容版 Fred

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