CSS实例教程:非浮动区域设置宽度


前一段时间我在做Green Gaint这个主题的时候,发现了一个在布局中出现的关于浮动的问题。让我来说明一下,如下图所示:

我们假设有一个容器A,在这个容器内有两个容器B和C,B设置了高度和宽度,并且向左浮动,C没有浮动,它将围绕在B区域的周围,这是典型的浮动效果,没有问题。

但是当C容器设置了宽度之后,并且B和C的宽度之和小于A容器之后的效果,在Firefox和IE8中是这样的:

在IE6和IE7中的表现是这样的:

在这里,让我们将B区域看作是网页中的主要内容区,C区域看作是侧边栏,要达到B在左,C在右,B和C之间还要保留一定的空间的话,我们还要给C设置margin-left属性,当添加上左边距的属性后,IE和Firefox中的布局一致了。

当然,你可以完全不用给C区域设置宽度,只需要添加左边距就能达到希望的布局效果,但是有时候我们需要给C区域添加宽度值的时候,你要明白Firefox、IE8和IE6、IE7对于这种布局的表现是不同的。



相关阅读:
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript中的new使用
Linux系统下卸载自带Mysql、Apache、Php
ASP.NET MVC处理文件上传
PHP 得到根目录的 __FILE__ 常量
实例讲解connect resource权限
用CSS和jQuery制作霓虹效果
javascript 包裹节点 提高效率
Linux下添加新硬盘及分区格式化要点
MySQL查询优化程序
使用ASP.NET MVC Futures 中的异步Action
实现DedeCms文章标题分栏显示
Oracle应用开发中的几个经典问题
PHP实现URL加密解密的内部算法
快速导航

Copyright © 2016 phpStudy |