完美解决DIV+CSS浮动布局的方案

来源:爱站网时间:2021-02-20编辑:网友分享
我们在css中会经常使用到DIV+CSS网页布局,但是在使用过程中我们会发现浮动并不像表格那样好用,那么我们要怎么解决呢?下面我们就去看看完美解决DIV+CSS浮动布局的方案。

我们在css中会经常使用到DIV+CSS网页布局,但是在使用过程中我们会发现浮动并不像表格那样好用,那么我们要怎么解决呢?下面我们就去看看完美解决DIV+CSS浮动布局的方案。

浏器自身的问题往往是这些麻烦的罪魁祸首。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里会出现垂直滚动条。
示例代码:

 

 

复制代码
代码如下:

 

 



峰之部落 DIV+CSS浮动布局完美解决方案

something from http://www.aizhan.com/


页脚始终在底部


注意别忘了样式表中要加:html,body{height:100%;} 峰之部落 原创文章,转载请注明出处。

文中就是小编介绍完美解决DIV+CSS浮动布局的方案,这三招应用技巧,基本能解决DIV+CSS浮动布局的常见问题,且能较好的兼容不同的浏览器。

上一篇:CSS Sprite的最佳实践方法

下一篇:网页中图片如何应用CSS的滤镜的效果

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载