css怎么实现文字在图片四周环绕

html-css05

css怎么实现文字在图片四周环绕,第1张

<html>

<head>

<style type="text/css">

img

{

float:right

}

</style>

</head>

<body>

<p>在下面的段落中,我们添加了一个样式为 <b>float:right</b>的图像。结果是这个图像会浮动到段落的右侧。</p>

<p>

<img src="/i/eg_cute.gif" />

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

</body>

</html>

网页中文字环绕图片效果的实现

1、直接设定文字环绕图片

<div

style="width:

400px

border:

1px

solid

#CCCCCC">

<img

id="img"

src="images/photo_01.gif"

style="float:

left

clear:

left

width:

120px

height:

120px

padding:

10px"

/>

某某公司是生产销售新型电子材料、服装、家具的专业厂家,有自营进出口权,年销售额过亿元。<br/>新型电子材料产品已在全国各大电子企业、军工企业以及航天、钟表、珠宝首饰等行业享有较高的知名度。

服装畅销北美、欧洲、大洋洲<br/>我要实现左上

角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。

</div>

2、用CSS实现文字环绕图片的效果

以下是引用片段:

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style>

div

{

width:300px

border:1px

solid

red

}

img

{

float:left

width:100px

height:100px

}

</style>

<div>

<img

src="images/photo_01.gif"

/>

某某公司是生产销售新型电子材料、服装、家具的专业厂家,有自营进出口权,年销售额过亿元。<br/>新型电子材料产品已在全国各大电子企业、军工企业以及航天、钟表、珠宝首饰等行业享有较高的知名度。

服装畅销北美、欧洲、大洋洲<br/>我要实现左上

角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。

</div>

<p>content content content content content content <img src="1.jpg" style="float:right/>content content content content content content content content content content

</p>

在段落中插入img,img设置向右浮动。