.top{width:100%;height:50px; background:#999;}
.main{width:100%;height:600px;position:relative;}
.left{ width:200px;height:600px;position:absolute;left:0;top:0;background:#444;}
.right{height:600px;margin-left:200px;background:#333;}
.foot{width:100%;height:50px; background:red;}
.main{width:100%;height:600px;position:relative;}
.left{ width:200px;height:600px;position:absolute;left:0;top:0;background:#444;}
.right{height:600px;margin-left:200px;background:#333;}
.foot{width:100%;height:50px; background:red;}
div {width:400px; height:400px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; } 大家试试这个绝对定位居中
2016-03-24
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;background:RGB(204,204,204);height:100px;}
.main{background:red;position:relative;}/*使left以main为基准绝对定位*/
.top{width:100%;background:RGB(204,204,204);height:100px;}
.main{background:red;position:relative;}/*使left以main为基准绝对定位*/
.left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
.right{height:500px;background:RGB(154,204,153);margin-left:210px;}
.foot{width:100%;background:RGB(255,102,52);}/*因为是position实现排版,所以不需要清除浮动*/
.right{height:500px;background:RGB(154,204,153);margin-left:210px;}
.foot{width:100%;background:RGB(255,102,52);}/*因为是position实现排版,所以不需要清除浮动*/
/*solution 2:calc used*/
.left{float:left; width:200px; height:500px;}
.right{float:right; width:calc(100% - 205px); height:600px;}
.foot{clear:both;}
.left{float:left; width:200px; height:500px;}
.right{float:right; width:calc(100% - 205px); height:600px;}
.foot{clear:both;}