一个简单的左中右，为了做到大多的浏览器兼容却不容易。
一个工作几年的专业前台程序员不知道一些用法也是正常。
<!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>
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
