一、中间定宽、左、右侧百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#left,
#right {
float: left;
width: 50%;
margin: 0 0 0 -150px;
height: 200px;
} #middle {
float: left;
width: 300px;
background: #CCC;
height: 200px;
} #innerLeft,
#innerRight {
margin: 0 0 0 150px;
background: #EFEFEF;
}
二、左侧定宽，中、右侧百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="rightContent">
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
</div>
2、CSS代码：
#left {
float: left;
width: 300px;
margin: 10px 10px 0 0;
}
#rightContent {
margin-left: 300px;
}
#middle {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
三、左、右侧定宽，中间百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#left {
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
}
#middle {
height: 200px;
margin-left: 200px;
margin-right: 200px;
}
#right {
position: absolute;
top:;
right:;
width: 200px;
height: 200px;
}
四、左、中定宽，右侧百分比自适应：
1、HTML代码：
<div id="leftContent">
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#leftContent {
float: left;
width: 500px;
height: 200px;
background: #CCC;
}
#left,
#middle {
float: left;
width: 50%;
}
#right {
margin-left: 500px;
height: 200px;
}