三列自适应布局的实现方式(兼容IE6+)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.绝对定位方式

<div class="nm-3-lr">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="nm-3-lc">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="nm-3-cr">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>

/* 普通布局 */
.nm-3-lr,
.nm-3-lc,
.nm-3-cr
{
min-width: 400px;
margin: 10px 0;
position: relative;
*zoom:;
}
/* 左中右中间自适应 */
.nm-3-lr .aside-f{
position: absolute;
top:;
left:;
width: 200px;
}
.nm-3-lr .main{
margin: 0 210px;
}
.nm-3-lr .aside-s{
position: absolute;
top:;
right:;
width: 200px;
} /* 左中右右侧自适应 */
.nm-3-lc .aside-f{
position: absolute;
top:;
left:;
width: 200px;
}
.nm-3-lc .main{
margin-left: 420px;
}
.nm-3-lc .aside-s{
position: absolute;
top:;
left: 210px;
width: 200px;
} /* 左中右左侧自适应 */
.nm-3-cr .aside-f{
position: absolute;
top:;
right: 210px;
width: 200px;
}
.nm-3-cr .main{
margin-right: 420px;
}
.nm-3-cr .aside-s{
position: absolute;
top:;
right:;
width: 200px;
}

2.采用圣杯布局

<div class="bd-3-lr">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-lc">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-cr">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>

/* 圣杯布局 */
.bd-3-lr,
.bd-3-lc,
.bd-3-cr
{
min-width: 400px;
margin: 10px 0;
}
/* 左中右中间自适应 */
.bd-3-lr {
zoom:;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-f {
float: left;
width:200px;
margin-left: -100%; position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-s {
float: left;
width:200px;
margin-left: -200px; position:relative;
right: -210px;
} /* 左中右，右侧自适应 */
.bd-3-lc {
zoom:;
overflow:hidden;
padding-left:420px;
}
.bd-3-lc .main {
float:left;
width:100%;
}
.bd-3-lc .aside-f {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -420px;
_left: 0px; /*IE6 hack*/
}
.bd-3-lc .aside-s {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
} /* 左中右，左侧自适应 */
.bd-3-cr{
overflow: hidden;
padding-right: 420px;
}
.bd-3-cr .main {
width: 100%;
float: left;
}
.bd-3-cr .aside-f {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 210px;
}
.bd-3-cr .aside-s {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 420px;
}

3.采用双飞翼布局

<div class="df-3-lr">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="df-3-lc">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="df-3-cr">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>

/* 双飞翼布局 */
.df-3-lr,
.df-3-lc,
.df-3-cr
{
margin: 10px 0;
}
/* 右侧栏固定宽度，左侧自适应 */
.df-rgt{
zoom:;
overflow: hidden;
}
.df-rgt .df-main{
float: left;
width: 100%;
}
.df-rgt .df-main .main-warp{
margin-right: 210px;
}
.df-rgt .aside{
width: 200px;
margin-left: -200px;
float: left;
} /* 左中右中间自适应 */
.df-3-lr{
zoom:;
overflow: hidden;
}
.df-3-lr .df-main{
float: left;
width: 100%;
}
.df-3-lr .df-main .main-warp{ margin: 0 210px;
}
.df-3-lr .aside-f, .df-3-lr .aside-s{
width: 200px;
float: left;
}
.df-3-lr .aside-f{ margin-left: -100%;
}
.df-3-lr .aside-s{ margin-left: -200px;
} /* 左中右右侧自适应 */
.df-3-lc{
zoom:;
overflow: hidden;
}
.df-3-lc .df-main{
width: 100%;
float: left;
}
.df-3-lc .df-main .main-warp{ margin-left: 420px;
}
.df-3-lc .aside-f, .df-3-lc .aside-s{
width: 200px;
float: left;
}
.df-3-lc .aside-f{
margin-left: -100%;
}
.df-3-lc .aside-s{
margin-left: -100%;
position: relative;
left: 210px;
} /* 左中右左侧自适应 */
.df-3-cr{
zoom:;
overflow: hidden;
}
.df-3-cr .df-main{
width: 100%;
float: left;
}
.df-3-cr .df-main .main-warp{
margin-right: 420px;
}
.df-3-cr .aside-f, .df-3-cr .aside-s{
width: 200px;
float: left;
}
.df-3-cr .aside-f{
margin-left: -200px;
position: relative;
right: 210px;
}
.df-3-cr .aside-s{
margin-left: -200px;
}