利用css的clear属性搞定广告文字环绕效果
作者:何为 来源:hewei.org 时间:2008-05-24 13:48:00
是否看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用cms的基本没这个功能,因为内容标签里面不可能再自动加入一个广告标签,除非你添加文章的时候手动编辑,那不累死。
我也一直没想到过用css来控制,主要是没想到这个clear属性,今天偶然看到一个介绍,才知道原来实现文字环绕是如此简单。
代码示例:
<div class="news">
<div style="float:left;height:300px;width:0">一个宽为0的空白层,利用该层的高度控制广告层上下的位置</div>
<div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
</div>
关键在于clear:left的作用,clear有3个属性:clear:both,clear:left,clear:right,分别表示清除两边,左边,右边的浮动块。在广告层加上clear:left,那么就表示该层相对于空白层来说不浮动了,就往下移动了,太妙了,哈哈。
我们来比较一下:
<div class="news">
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
<div style="float:left;height:250px;width:250px;">去掉了清除浮动,你就明白了它的意义</div>
</div>
如果再加上这样一条:
<style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告
很遗憾,上面的测试发现只有ie可行,firefox和opera还有不同的结果,ie的效果是图片遇到广告层自动下移,firefox是不会下移,但是不会遮住广告层,因为广告层在最前,opera是图片不会下移,会遮住广告层,搞笑啊。
再次改进:
<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层
终于可以了,比较完美了,广告内容环绕的效果就这样搞定了:)
//2008-02-29,修改by:何为
忘记加上了
<style>.news{float:left;}</style>
有人问要文字上右下都环绕,我改了一下,如下:
标签:clear,文字,广告,效果,css
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
阿里妈妈广告牌制作规范
2009-07-15 13:23:00
windows7下调试ASP+ACCESS错误“未找到提供程序 该程序可能未正确安装”解决办法
2009-12-26 18:35:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/20091119044705-94s.jpg)
asp脚本延时 自定义的delay函数
2008-04-07 12:59:00
MySQL Order By索引优化
2011-01-04 19:56:00
如何对Mysql 数据表压缩
2010-11-25 17:21:00
Oracle关于时间/日期的操作
2009-02-26 10:37:00
[译文]The seven rules of Unobtrusive JavaScript
2008-09-29 12:10:00
SQL Server中应当怎样得到自动编号字段
2009-01-15 12:48:00
javascript 函数调用的对象和方法
2010-07-02 12:25:00
Dreamweaver MX 2004 之 Flash Element
2010-03-25 12:27:00
![](https://img.aspxhome.com/file/UploadPic/20071/200713110301677s.gif)
ASP的URLDecode函数URLEncode解码函数
2011-02-16 11:17:00
创建数据表/创建列的一些asp函数
2008-06-24 12:21:00
asp中获取当前页面的地址与参数的函数代码
2011-02-20 10:37:00
给在DreamWeaver编写CSS的人一些习惯建议
2007-12-25 12:10:00
从 msxml6.dll 中获取 DOMDocument 对象的方法与属性
2009-02-22 18:46:00
通过FSO进行页面计数
2008-11-27 16:02:00
让数据站住脚-浅谈用户研究中的信度与效度
2010-09-10 13:14:00
![](https://img.aspxhome.com/file/UploadPic/20109/10/banner21-91s.jpg)
CSS鼠标悬停tip效果
2007-08-26 17:32:00
![](https://img.aspxhome.com/file/UploadPic/20078/26/200782618155189s.gif)
月影:JavaScript王者归来
2008-08-05 17:18:00
![](https://img.aspxhome.com/file/UploadPic/20088/5/200885172229312s.jpg)
利用sql函数生成不重复的订单号的代码
2012-01-05 19:02:55