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

当前位置 : 首页 > 网页制作 > CSS > DIV+CSS 浮动布局完美解决方案

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

来源: 作者: 时间:2015-11-26 19:21
DIV+CSS网页布局常用到浮动方案,但浮动并不像表格那样好用,很多时候会出问题。同时设计不够良好的浮动布局,在不同的浏览器下会有不同的表现,可能设计时照着常用的浏览器做好
DIV+CSS网页布局常用到浮动方案,但浮动并不像表格那样好用,很多时候会出问题。同时设计不够良好的浮动布局,在不同的浏览器下会有不同的表现,可能设计时照着常用的浏览器做好了,拿到其它浏览器里一看又乱掉了。
浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好些,IE7、IE8次之,IE6目前用户群较多,但也比较糟糕,经常莫名其妙地多出一些空隙等等。拿浮动布局来说,你算好的宽度在Firefox以及 IE7、IE8下可能是正常的,拿到IE6里就会发现不该换行的时候它却换行了。
然而,不管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浮动布局的常见问题,且能较好的兼容不同的浏览器。
Tag:
网友评论

<