DIV+CSS 浮动布局完美解决方案
2009-10-28 23:23
633 查看
浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好些,IE7、IE8次之,IE6目前用户群较多,但也比较糟糕,经常莫名其妙地多出一些空隙等等。拿浮动布局来说,你算好的宽度在Firefox以及 IE7、IE8下可能是正常的,拿到IE6里就会发现不该换行的时候它却换行了。
然而,不管HTML页面设计人员怎么骂微软,网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。
1、如果是两栏并列,要在中间显示分界线或图片,可以使用repeat-y的背景图片来实现,此样式写在这两栏的父级元素中,可以保证分界线与最高的栏等高。
示例:
假设vline.gif是宽100px高1px,左边99像素为白色,最右边1像素是黑色,则此背景图片实现的效果就是在两列间拉出一条黑色竖线。
不过要说明一下,这种方法如果父元素宽度设计200px,理论上是正确的,但实际上在IE6里会换行,因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些,但这样格式会不够完美。你可以用下面的margin法解决这个换行问题。
2、如果有一列想用自适应宽度,而不是固定宽度,可以巧用margin属性。比如左边固定100px,右边自适应,则可以让父元素“margin- left:100px”,第一列再“margin-left:-100px”,第二列就可以用“width:100%”来实现自适应宽度了。如果不这样巧用margin,第二列没法设百分比,因为浏览器客户区宽度*100%+100px是超出浏览器客户区总宽度的,浏览器会出现横向滚动条;又因为浏览器客户区总宽度不确定(确定的话就不用什么自适应了),你也没法用类似80%这样的百分比使其正好撇下100px给第一列。
另外你可能想让这两列的父级有一个最小宽度以避免两列换行,这个可以用min-width属性来实现。
示例代码:
3、自适应高度的该如何设计呢?很多人为这个问题头痛过,抱怨height:100%不管用。其实,让它管用很简单,只是别忘了给html也加上 height:100%的属性。没错,就是html,你可以写成这样:html,body{height:100%}。但这样还有个问题,没解决。如果你想让一行字始中处于最下面,该怎么做呢?答案还是margin。
你可以把主体部分放在一个DIV中,将其最小高度设为100%,然后在后面放页脚的DIV,假如它的高度为40px,则“margin- top:-40px”,这样可能会使主体部分下边的内容被遮住,解决办法是在主体部分最下面的元素上加“padding-bottom:40px”属性即可。理论上讲加“margin-bottom:40px”也可以,但观查发现在IE里会出现垂直滚动条。
示例代码:
注意别忘了样式表中要加:html,body{height:100%;} 峰之部落 原创文章,转载请注明出处。
这三招应用技巧,基本能解决DIV+CSS浮动布局的常见问题,且能较好的兼容不同的浏览器。
然而,不管HTML页面设计人员怎么骂微软,网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。
1、如果是两栏并列,要在中间显示分界线或图片,可以使用repeat-y的背景图片来实现,此样式写在这两栏的父级元素中,可以保证分界线与最高的栏等高。
示例:
<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;”> <div id=”col1″ style=”float:left;width:100px;”>第一列</div> <div id=”col2″ style=”float:left;width:100px;”>第二列</div> </div>
假设vline.gif是宽100px高1px,左边99像素为白色,最右边1像素是黑色,则此背景图片实现的效果就是在两列间拉出一条黑色竖线。
不过要说明一下,这种方法如果父元素宽度设计200px,理论上是正确的,但实际上在IE6里会换行,因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些,但这样格式会不够完美。你可以用下面的margin法解决这个换行问题。
2、如果有一列想用自适应宽度,而不是固定宽度,可以巧用margin属性。比如左边固定100px,右边自适应,则可以让父元素“margin- left:100px”,第一列再“margin-left:-100px”,第二列就可以用“width:100%”来实现自适应宽度了。如果不这样巧用margin,第二列没法设百分比,因为浏览器客户区宽度*100%+100px是超出浏览器客户区总宽度的,浏览器会出现横向滚动条;又因为浏览器客户区总宽度不确定(确定的话就不用什么自适应了),你也没法用类似80%这样的百分比使其正好撇下100px给第一列。
另外你可能想让这两列的父级有一个最小宽度以避免两列换行,这个可以用min-width属性来实现。
示例代码:
<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;margin-left:100px;min-width:768px;”> <div id=”col1″ style=”float:left;width:100px;margin-left:-100px;”>第一列</div> <div id=”col2″ style=”float:left;width:100%;”>第二列</div> </div>
3、自适应高度的该如何设计呢?很多人为这个问题头痛过,抱怨height:100%不管用。其实,让它管用很简单,只是别忘了给html也加上 height:100%的属性。没错,就是html,你可以写成这样:html,body{height:100%}。但这样还有个问题,没解决。如果你想让一行字始中处于最下面,该怎么做呢?答案还是margin。
你可以把主体部分放在一个DIV中,将其最小高度设为100%,然后在后面放页脚的DIV,假如它的高度为40px,则“margin- top:-40px”,这样可能会使主体部分下边的内容被遮住,解决办法是在主体部分最下面的元素上加“padding-bottom:40px”属性即可。理论上讲加“margin-bottom:40px”也可以,但观查发现在IE里会出现垂直滚动条。
示例代码:
<div id=”main” style=”height:auto;min-height:100%;”> <div>峰之部落 DIV+CSS浮动布局完美解决方案</div> <div style=”padding-bottom:40px;”>something from http://www.jb51.net/</div> </div> <div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>
注意别忘了样式表中要加:html,body{height:100%;} 峰之部落 原创文章,转载请注明出处。
这三招应用技巧,基本能解决DIV+CSS浮动布局的常见问题,且能较好的兼容不同的浏览器。
相关文章推荐
- DIV+CSS浮动布局完美解决方案
- 一个完美的Div+CSS三列浮动布局代码
- CSS 完美DIV+CSS布局
- css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;
- 还只会div+css浮动布局吗?你OUT了!听"老罗"讲解inline-block布局技术
- DIV+CSS笔记:第六课:浮动布局
- 使用DIV+CSS布局网页后,容器内的文字不可选择的解决方案
- div+css布局之固定浮动布局
- Div + Css布局注意要点及解决方案
- DIV+CSS布局解决方案大全
- DIV+CSS基础教程:浮动(float)页面布局
- CSS中DIV DL边框高度自动适应的完美解决方案
- div+css布局清楚浮动方法
- Div+CSS教程----DivCSS布局绝对定位和浮动
- css实现圣杯布局(两栏固定-中列浮动-中列div排在前面)--详解
- 图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)
- <div+css页面布局课堂笔记>8---页面浮动设计
- 处理div+css布局左右浮动问题
- div、css的浮动布局
- div+css布局,清除浮动