繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > DIV+CSS 浮动布局完美解决方案
- CSS样式表
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS解决链接锚点定位偏移的代码
- 一个css transform效果 很有图片的感觉
- ie6,ie7,firefox的textarea滚动条、边框
- 12种CSS BUG解决方法与技巧
- CSS 常用设置备忘
- table中td内容换行问题
- 外部引用CSS中 link与@import的区别
- CSS background-position 属性 定位图片
- css 解决英文字符与阿位伯数字自动换行
- div ,frame等空间的透明实现代码
- CSS中几种浏览器对不同版本的支持与区分写法
- 多个浏览器对容器宽度实际像素的解释
- CSS 用ul li做圆角表格
- CSS 之dl dt dd模拟表格实例代码
- 创建超链接及css 样式设置
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
- css float 解析学习
- 学习DIV+CSS难不难 需要掌握哪些知识
- IE8 CSS hack
CSS样式表 中的 DIV+CSS 浮动布局完美解决方案
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 177 ::
收藏到网摘: n/a
浏器自身的问题往往是这些麻烦的罪魁祸首。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.ruanchen.com/lt;/div>
</div>
<div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>
注意别忘了样式表中要加：html,body{height:100%;} 峰之部落 原创文章，转载请注明出处。
这三招应用技巧，基本能解决DIV+CSS浮动布局的常见问题，且能较好的兼容不同的浏览器。
评论 (0) All
