首页 >> 网站技术 >> CSS中常见的布局方式

CSS中常见的布局方式

Catagory:网站技术, Date:2010年12月21日,Author: 工业品营销-贾定强
两列自适应宽度 #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%,为了兼容全部写上即可。

greek translationaquaelite

来源:工业品营销,原文地址:http://www.jiadingqiang.com/1792.html,欢迎分享本文,转载请保留出处!

Comments: 7 Responses to “ CSS中常见的布局方式 ”
二月 24th, 2011
仿站 说 Said:

这个看了基本就没有多大问题了CSS

[回复]

十二月 27th, 2010
上海男科 说 Said:

顶下不错。。

[回复]

十二月 27th, 2010
上海男科 说 Said:

学习下。

[回复]

十二月 27th, 2010
左坤 说 Said:

呵呵,看看啦,其实我也只是会来点小变动,毕竟不是做设计的。。。

[回复]

十二月 26th, 2010
仿站 说 Said:

文章写的很有技术含量。哦

[回复]

十二月 24th, 2010
易购图书 说 Said:

俺是新手,过来向前辈学习

[回复]

十二月 22nd, 2010
厦门SEO 说 Said:

技术方面的问题还是要学习一下了

[回复]

你也来说几句:

名字*必填
邮箱*必填,不会被公开
网站
QQ群交流
最近文章
文章归档
  • 2017 (3)
  • 2016 (30)
  • 2015 (63)
  • 2014 (21)
  • 2013 (38)
  • 2012 (25)
  • 2011 (67)
  • 2010 (268)
  • 2009 (19)