为了相应网页的标准化进程，最近开始学习div+css网页布局了，感觉css确实不错，现在发表出来，跟大家共享
一列固定宽度
<div id=”left” >一列固定宽度</div>
#left{
width:455px;
height:1000px;
background-color:#00FFFF;
border:1px solid #333333;
}
一列自适应
<div id=”left” >一列自适应</div>
#left{
width:80%;
height:1000px;
background-color:#00FFFF;
border:1px solid #333333;
}
一列宽度居中（auto让浏览器自动判断边距，将当前div但左右边距设为auto，浏览器会将div但左右边距设为相同）
<div id=”left” >一列固定宽度</div>
#left{
width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; margin：opx auto；
}
二列固定宽度
<div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{float:left;width:400px;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
二列宽度自适应（在算百分比时要考虑边框大小）
<div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:20%;height:1000px;background-color:#00FFFF;border:1px solid #333333; }
#right{float:left;width:70%;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
两列右列宽度自适应（左栏宽度为固定值，右栏宽度不设值且不浮动）
<div id=”left” >左列</div>
<div id=”right” >右列</div>
#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{height:1000px;background-color:#000000;border:1px solid #FF0000;
}
二列固定宽度居中（外层设左右边距为auto,注意大盒子的固定宽度的算法）
<div id=”box”>
<div id=”left” >左列</div>
<div id=”right” >右列</div>
</div>
#box {margin:0px auto ;width:404px;
}
#left {float:left;width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333;
}
#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;
}
三列宽度自适应、浮动中间列（左右两列绝对定位，中间边距参照左右两列）
<div id=”left” >左列</div>
<div id=”center” >中间</div>
<div id=”right” >右列</div>
#left {width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333; position:absolute;top:0px;left:0px;
}
#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;position:absolute;top:0px;left:0px;
}
#center {height:1000px;background-color:#000000;border:1px solid #FF0000;margin-left:104px;maigin-right:104px;
}
高度自适应（对象高度是否百分比显示，取决于其父级对象。浏览器默认情况下，body没有高度属性，直接设height:100%;时，不产生任何效果，但给body设定100%后，便发生作用了）
html,body{margin:opx;height:100%;
}
#left {float:left;width: 300px;height: 100%;background-color:#00FFFF;border:1px solid #333333;
}
更多信息请查看IT技术专栏