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

王朝数码·作者佚名  2010-06-18
窄屏简体版  字體: |||超大  

前一段时间我在做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对于这种布局的表现是不同的。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航