是否看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用cms的基本没这个功能,因为内容标签里面不可能再自动加入一个广告标签,除非你添加文章的时候手动编辑,那不累死。
我也一直没想到过用css来控制,主要是没想到这个clear属性,今天偶然看到一个介绍,才知道原来实现文字环绕是如此简单。
代码示例:
关键在于clear:left的作用,clear有3个属性:clear:both,clear:left,clear:right,分别表示清除两边,左边,右边的浮动块。在广告层加上clear:left,那么就表示该层相对于空白层来说不浮动了,就往下移动了,太妙了,哈哈。
我们来比较一下:
如果再加上这样一条:
//让内容里面的图片和表格不会遮到广告
很遗憾,上面的测试发现只有ie可行,firefox和opera还有不同的结果,ie的效果是图片遇到广告层自动下移,firefox是不会下移,但是不会遮住广告层,因为广告层在最前,opera是图片不会下移,会遮住广告层,搞笑啊。
再次改进:
//让图片和表格自动处于最底层
终于可以了,比较完美了,广告内容环绕的效果就这样搞定了:)
//2008-02-29,修改by:何为
忘记加上了
有人问要文字上右下都环绕,我改了一下,如下:
新闻内容 |