左栏固定,右栏自适应完美兼容版
2009-08-12 10:06 Fred-Xu 阅读(386) 评论(0) 编辑 收藏 举报
网上找了很多流体布局的代码,五花八门,没有很完美的兼容版本。正好有个朋友是做前端设计的,他给了我携程网的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:<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>
#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
}
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
}