所谓“自适应”不过就是对width设置以百分比为单位的宽度，本文所讨论的只是一点关于3列浮动三列宽度自适应布局的细节问题。
首先来看下3列浮动三列宽度自适应布局的效果：
3列浮动三列宽度自适应布局目前总结了两种方法实现：
A.
<style type="text/css">
body{
margin:0;
}
#left{
background-color:#ffcc00;
border:0px;
width:25%;
height:250px;
position:absolute;
top:0px;
left:0px;
}
#center{
background-color:#ccffcc;
border:0px;
height:250px;
/*这里没有设置width，而实际上是间接默认了width为100%,要注意left和right两个盒子都是嵌在center这个盒子中的*/
}
#right{
background-color:#ffcc00;
border:0px;
width:25%;
height:250px;
position:absolute;
top:0px;
right:0px;
}
</style></head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
用了定位属性position，不允许中间的盒子设置宽度！
如果设置了宽度运行效果：
可以看出，中间留出了一大片空白，原因代码中已经注释了。
B.
<style type="text/css">
body{
margin:0px;
}
.left{
background-color:#ffcc00;
border:0px;
width:25%;
height:250px;
float:left;
}
.center{
background-color:#ccffcc;
border:0px;
width:50%;/*与前面代码不同的是，这里定义了width,实际上是3个独立的盒子分开后拼接作用的效果,不存在内嵌*/
height:250px;
float:left;
}
.right{
background-color:#ffcc00;
border:0px;
width:25%;
height:250px;
float:left;
}
</style></head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
这是第二种方法，只用float属性，注意3个盒子是拼接在一起的，需要对3个盒子都设置宽度！
以上理解之后，那么关于3列浮动中间宽度自适应可以用position属性即方法A
实现（只需把左右盒子设置为固定宽度，中间不设置即可），不建议使用方法B即只用float实现，毕竟两边盒子设置为固定宽度那么中间盒子宽度该如何设置呢？！
（设置为固定值肯定不是自适应，设置为百分比又该设置为多少呢？！）
目前为止，感觉实际制作中发现还是3列自适应好用，3列浮动中间自适应用的不多。
8551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
