float和position定位的CSS布局实例
单行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin:0 auto;width:400px;}
两行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin:0 auto; width:400px;}
#content-end{margin:0 auto; width:400px;}
三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin:0 auto; width:400px;}
#content-mid{margin:0 auto; width:400px;}
#content-end{margin:0 auto; width:400px;}
单行两列
#bodycenter{width:700px;margin:0 auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
#header{width:700px;margin:0 auto;overflow:auto;}
#bodycenter{width:700px;margin:0 auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
#header{width:700px;margin:0 auto;}
#bodycenter{width:700px;margin:0 auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin:0 auto;overflow:auto;clear:both;}
单行三列(绝对定位)
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0 120px 0 120px;}
#right{position:absolute;top:0;right:0;width:120px;}