HTML+CSS如何实现文字环绕的效果

html-css015

HTML+CSS如何实现文字环绕的效果,第1张

按照下面这种代码格式,就可以设置成你想要的效果,css根据需要设置段落格式,图片大小也可以通过里面的div设置

<div>

<div><img></div>文字

</div>

<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>

<style>

.box{ width:400px}

.ens{word-break:break-all}

</style>

.

.

.

<div class="box">

<!--为了对比清楚把样式写在标签里了,这个height30px是图片上方文字空间的高度 -->

<div style="float:rightheight:30pxwidth:1px"></div>

<!--本例把图片的大小和容器的大小设为一样了,如果想有间隙调整容器的大小和padding-->

<div style="float:rightwidth:200pxheight:150pxclear:right">

<img src="imgaes/test.jpg" width="200" height="150" />

</div>

<p class="ens"><!--字母这个样式必须加上否则不会自动换行,如果是汉字就不用 -->

ccccccccccccccccccccccccccccc...

</p>

</div>