css 怎么不叫文字围绕图片?就是左面是图片右边是文字,当文字多了就跑到图片下面去了!

html-css09

css 怎么不叫文字围绕图片?就是左面是图片右边是文字,当文字多了就跑到图片下面去了!,第1张

<html>

<style type="text/css">

#he{width:300pxheight:300pxborder:1px solid #000000}

img{width:200pxheight:200pxfloat:left}

</style>

<body>

<div id="he">

<img src="/logo.gif" />

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

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

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

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

</div>

</body>

</html>

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

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

<div style="width: 400pxborder: 1px solid

#CCCCCC">

<img id="img" src="images/photo_01.gif"

style="float: leftclear: leftwidth: 120pxheight: 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>