css 文字上右下环绕广告的写法

所属分类：网页制作 / CSS 阅读数： 1288

收藏 0赞 0分享

很久一段时间，我都在寻求一种文字从上-右-下方向环绕广告位的一个办法，而在找到之前，基本都是利用发布编辑器的所见即所得模式来实现广告的环绕。或者是利用程序截取一段文字在头部的办法。
今天终于找到一种写法，就是用一个宽度为1的空标签的高度来占位，然后图片清除浮动，来制造出这个顶部文字环绕的效果。啥都不说了，看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>利用css的clear属性搞定广告文字环绕</title> <meta name="keywords" content="css,clear,文字环绕" /> <meta name="description" content="利用css的clear属性搞定广告文字环绕，" /> <body> <div style="float:left;" mce_style="float:left;"> <div style="float:left;height:100px;width:1px;"></div> <div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"></div> <p>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p> </div> </body> </html>

提示：您可以先修改部分代码再运行

更多精彩内容其他人还在看

css 文字上右下环绕广告的写法

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

前端设计师需要了解的9个问题

CSS强制性换行的方法区别详解

CSS语义化命名方式及常用命名规则

ul li内容宽度的问题的解决方案

html5+css3气泡组件的实现

html5+css3之CSS中的布局与Header的实现

一款恶搞头像特效的制作过程利用css3和jquery

大图片根据分辨率自适应宽度仍居中显示

CSS3提交意见输入框样式代码

网络赚钱

站长故事

css 文字上右下环绕广告的写法

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

前端设计师需要了解的9个问题

CSS强制性换行的方法区别详解

CSS语义化命名方式及常用命名规则

ul li内容宽度的问题的解决方案

html5+css3气泡组件的实现

html5+css3之CSS中的布局与Header的实现

一款恶搞头像特效的制作过程 利用css3和jquery

大图片根据分辨率自适应宽度仍居中显示

CSS3提交意见输入框样式代码

网络赚钱

站长故事

一款恶搞头像特效的制作过程利用css3和jquery