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对于这种布局的表现是不同的。

—-想了解更多的linux相关异常处理怎么解决关注<计算机技术网(www.ctvol.com)!!>



本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/csstutorial/64382.html

(0)
上一篇 2020年4月10日
下一篇 2020年4月10日

精彩推荐