为了相应网页的标准化进程，最近开始学习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>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#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技术专栏