CSS中常见的布局方式

两列自适应宽度 #left1{ width:30%; height:300px; float:left;}

#right1{ width:70%; height:300px; float:left}/*全局最外层定位的时候不要为DIV添加border,因为border的使用相当于增加了div的宽度，百分比的使用会出现不确定性问题*/ 两列右列宽度自适用 #left{ background:#666; width:300px; height:200px; float:left}

#right{ background:#0CC; height:300px; }

FF中的right会平铺在left的后面，而在IE中right会自动排列在left的右侧，但二者添加内容时候效果一样，可以使用这种布局。 三列浮动中间列宽度自适用 1． 相对定位实现方式

#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浏览器 高度自适用 #left{background:#033;height:100%;width:300px;float:left}

html, body{/*两者同时出现达到兼容的目的*/

padding:0;margin:0;

height:100%}/*关键所在,如果没有这个，浏览器中是达不到所要的效果的*/

高度自适用问题：一个对象的高度是否可以使用百分比现实，取决于对象的父级对象，例如left的父级对象是body的话：默认情况下，浏览器没有定义body的高度的，当然宽度默认定义了100%，所以宽度可以直接使用即可。

IE和FF对于页面对象的解析存在差异，IE中html默认100%,body无定义，而FF中，html的高度没有默认为100%,为了兼容全部写上即可。

微信扫一扫 或 点击链接联系我