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

很久一段时间,我都在寻求一种文字从上-右-下方向环绕广告位的一个办法,而在找到之前,基本都是利用发布编辑器的所见即所得模式来实现广告的环绕。或者是利用程序截取一段文字在头部的办法。

今天终于找到一种写法,就是用一个宽度为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;">

<div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层,利用该层的高度控制广告层上下的位置。--></div>

<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码,firefox和opera还有少量偏差,需要另外调整,就不写了,基本可以。--></div>

<p>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

【报告】鲸准研究院:人工智能行业应用价值报告

历经六十年起落变化的人工智能领域在2017年到达融资最高点,然而新成立人工智能企业的数量却有所下滑。在2018年投资人热度依然保持的今天,人工智能究竟在哪些行...

37512
来自专栏企鹅号快讯

新零售时代,零售业的4大变化!

当前,新零售概念炙手可热,巨头纷纷入场,传统企业也在纷纷转型;可透过现象看本质的时候,我们会发现新零售,不过是借助一些新技术,通过改变和优化现有零售方式,为用户...

2059
来自专栏人称T客

企业用户移动信息化 IT能力获取概况 | 研报×To B

分析师:移动信息化研究中心 杨洋 关键词:移动信息化,IT获取能力 网址:www.tikehui.com 这里是移动信息化研究中心在 T 客汇上的研报专栏。我们...

2542
来自专栏全栈数据化营销

城市数据分析:基于腾讯人口迁徙数据研究城市人口流动

随着百度、腾讯对数据的开放,城市数据的研究也更加准确了,这让数据在城市分析、人口研究、商业价值挖掘中发挥着更大的作用,本篇文章就是一个成数据数据的实际运用。

1152
来自专栏钱塘大数据

《2017微信数据报告》发布,这数据很“大”!

作者:腾讯 11月9日消息 今天腾讯官方发布了最新的《2017微信数据报告》,根据腾讯公布的数据,微信在国内已经成为首屈一指的聊天软件。报告核心数据如下: 1...

4419
来自专栏微信小开发

从附近小程序的3个分类,我看到了危险

昨天在查看微信中附近的小程序时,发现了一个重大的变化:新增“商超便利”、餐饮美食、“服饰箱包”3个标签。 ? 经常看的几个小程序资讯号也发出类似的消息,但显示的...

2000
来自专栏华章科技

2018生活消费趋势:越来越多95后开始泡枸杞

1月24日,第一财经商业数据中心(CBNData)联合口碑发布了《2018生活消费趋势报告》,基于口碑、阿里、淘票票、饿了么等数据,全方位洞悉国民生活消费最新趋...

993
来自专栏微信小开发

微信小程序与新零售相结合引流又出新方法啦!

随着网络的普及,科技的不断发展,消费者的消费模式不断变化,不断升级,促使线下的行业也纷纷寻找契机来对接线上服务。如今,在微信小程序的不断助攻下,商家纷纷尝试这一...

19110
来自专栏钱塘大数据

《华为区块链白皮书》重磅发布(4大类应用场景/5分钟上链)

华为云于4月17日正式发布了《华为区块链白皮书》。华为云BU总裁郑叶来也在当天对媒体表示,区块链主要分为币圈和链圈,华为不会去碰币圈。这是华为首次对外明确了区块...

1173
来自专栏镁客网

阿里巴巴斥资千万美元收购以色列创企Visualead,加强VR/AR购物体验 | 热点

670

扫码关注云+社区