#right1{ width:70%; height:300px; float:left}/*全局最外层定位的时候不要为DIV添加border,因为border的使用相当于增加了div的宽度,百分比的使用会出现不确定性问题*/
#right{ background:#0CC; height:300px; }
FF中的right会平铺在left的后面,而在IE中right会自动排列在left的右侧,但二者添加内容时候效果一样,可以使用这种布局。
#left{ width:200px; float:left; background-color:#FFF}
#mid{ width:auto; background:#00FF00; margin:0 230px; /*左右留下间距*/
border:1px solid #000;}
#right{ width:200px; float:right; background-color:#CCC}
<div id=”left”></div>
<div id=”right”> </div>
<div id=”mid”></div> /*书写顺序不要错,只要这种顺序书写才会达到所需要的效果,如果middle放到了中间的话,right块会掉到下一行*/
这种布局方式兼容IE6,7,8及FF等浏览器。
一般这种浮动宽度都定义最小宽度,不至于最小宽度之后出现变形。
min-width:1004px;/*FF识别,IE不识别*/
width:expression((documentElement.clientWidth<1004)?”1004px”:”auto”);/*针对IE的hack代码,同理max-width类似*/
2. 绝对定位实现方式
#left3{ background:#999;width:100px;height:200px;position:absolute;top:0;left:0}
#right3{width:100px;height:200px;position:absolute;background:#693;top:0;right:0}
#middle3{background:#0CF;height:200px;margin-left:120px;margin-right:120px;}
<div id=”left3″></div>
<div id=”middle3″></div>
<div id=”right3″>sdf</div>
代码完全兼容FF和IE浏览器
html, body{/*两者同时出现达到兼容的目的*/
padding:0;margin:0;
height:100%}/*关键所在,如果没有这个,浏览器中是达不到所要的效果的*/
高度自适用问题:一个对象的高度是否可以使用百分比现实,取决于对象的父级对象,例如left的父级对象是body的话:默认情况下,浏览器没有定义body的高度的,当然宽度默认定义了100%,所以宽度可以直接使用即可。
IE和FF对于页面对象的解析存在差异,IE中html默认100%,body无定义,而FF中,html的高度没有默认为100%,为了兼容全部写上即可。
微信扫一扫 或 点击链接联系我
这个看了基本就没有多大问题了CSS
顶下不错。。
学习下。
呵呵,看看啦,其实我也只是会来点小变动,毕竟不是做设计的。。。
文章写的很有技术含量。哦
俺是新手,过来向前辈学习
技术方面的问题还是要学习一下了