DIV+CSS 浮动布局完美解决方案
发布时间：2009-10-28 23:23:52 作者：佚名 
我要评论
我要评论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 https://www.jb51.net/</div>
</div>
<div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>
注意别忘了样式表中要加：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 https://www.jb51.net/</div>
</div>
<div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>
注意别忘了样式表中要加：html,body{height:100%;} 峰之部落 原创文章，转载请注明出处。
这三招应用技巧，基本能解决DIV+CSS浮动布局的常见问题，且能较好的兼容不同的浏览器。
相关文章
- 这篇文章主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下2016-05-10
- css的核心内容：标准流、盒子模型、浮动、定位（可以说不理解这些概念绝做不出合适的网页）2009-12-21
- W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。2009-10-15
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用
关于在html中浮动层是众多网页爱好者刚开始的难点，主要在于定位。如果你对CSS定位还不够了解 可以接着往下看，运行里面的内容即可。 【需求】： 将一个网页分成头、身2009-07-01- 网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning2009-04-02
- 我们接着上节课，继续学习，我把页面整体效果发出来，方便大家学习2010-01-07
- 前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！2010-01-07
- 在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素2009-07-01
网页布局 CSS简单实现垂直居中-CSS教程-网页制作-网页教学网
英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不2008-10-17
最新评论