日期:2014-05-17 浏览次数:20600 次
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{padding:0;margin:0;font: 12px/1.5 宋体;} html{overflow-y:scroll;} #all{border:5px dashed #f60;width:950px;overflow:hidden;margin:50px auto 0;} #left{width:50px;background:yellow;float:right;} #middle{width:830px;background:red;float:right;margin:0 0 0 10px;} #right{width:50px;background:green;float:right;margin:0 0 0 10px;} </style> </head> <body> <div id ="all"> <div id = "left">左边</div> <div id = "middle">中部</div> <div id = "right">右部</div> </div> <br /><br /><br /> <div style="border-style:solid;border-color:yellow red;border-width:60px;height:30px;width:30px;float:left;margin:0 10px 0 0;"></div> <div style="border-style:solid;border-color:yellow red;border-width:60px;height:0;width:0;float:left;margin:0 10px 0 0;"></div> <div style="border-style:solid;border-color:white yellow red white;border-width:60px;height:0;width:0;float:left;margin:0 10px 0 0;"></div> <!-- <div style="clear:both;height:0;font-size:0;line-height:0"></div> IE6自动会给空标签约12px的高度 --> <!-- 如果注释在两个浮动代码中间,有2个以上在注释 IE6 布局混乱 margin:50px auto 0; 第一参数 top 最后一个参数left float:right 前面元素(整体递归)移动到下一个元素后面 --> </body> </html>?