大致思路:左右两列固定宽度,采用绝对定位方式position:absolute;
中间不写定位方式,只要分别设置padding-left以及padding-right分别为左右容器的宽度即可。
?
CSS部分:
body{margin:0; padding:0;} //此段代码是为了去除body默认的边界,这样不会影响三列的显示效果。
#left{
 border:1px solid #000000;
 background-color:#CCCCCC;
 width:200px;
 position:absolute;
 left:0;
 top:0;
}
#right{
 border:1px solid #000000;
 background-color:#CCCCCC;
 width:200px;
 position:absolute;
 top:0;
 right:0;
}
#center{
 padding-left:202px;
 padding-right:202px;
 border:1px solid #000000;
 background-color:#3333CC;
}
?
结构部分:
<div id="left">左边内容</div>
<div id="center">中间内容</div>
<div id="right">右边内容</div>
