最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS文字环绕图片的例子
时间:2014-02-18 编辑:简简单单 来源:一聚教程网
文字环绕是Microsoft Office Word软件的一种排版方式,主要用于设置Word文档中的图片、文本框、自选图形、剪贴画、艺术字等对象与文字之间的位置关系。一般包括四周型、紧密型、衬于文字下方、浮于文字上方、上下型、穿越型等多种文字环绕方式。
但我们做网页布局时,有时也需要这样的样式,那么怎么办呢?其实是很简单的,主要就是float的使用,具体请看下面例子:
HTML部分:
ok,运行后的效果就是这样子的:
例子
代码如下 | 复制代码 |
HTML代码如下: CSS代码大致如下: div.wrap_area { position: relative; } div.wrap_area img { position: absolute; left: 0px; top: 0px; } div.wrap_area p { position: relative; } div.shape_wrap div { float: left; clear: left; height: 20px; } |
CSS掌握的不错的同学们应该就已经知道其中的奥妙了,同样是利用 float 将div 部分内容提出文档流,然后用div的堆砌造出一条正文要通过的路径。
-
上一个: css中页面布局清除浮动的方法
相关文章
- CSS怎么实现背景图片透明而文字不透明效果 04-28
- css中vertical-align 图片文字水平对齐分析 02-16
- css文字环绕图片实现方法 11-29
- css 图片加文字排列方式 09-15
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31