本文主要是介绍CSS-DIV左中右结构，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一个简单的左中右，为了做到大多的浏览器兼容却不容易。
一个工作几年的专业前台程序员不知道一些用法也是正常。
<!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>
这篇关于CSS-DIV左中右结构的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
