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

html-css017

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

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

<div>

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

</div>

可以设置其CSS属性vertical-align。

vertical-align属性可设置元素的垂直排列。

img.top {vertical-align:text-top}

引用这个CSS可以解决你的问题。

可以参考CSS帮助文档：http://www.w3school.com.cn/css/pr_pos_vertical-align.asp

里面有实例，一目了然。

如还有什么疑问，请留言！

楼主关心下帖子，问题是否已经解决？

我的方案是否可行？

=======

文字环绕

=======

<style>

div {

width:300px

border:1px solid red

}

img {

float:center

width:100px

height:100px

}

</style>

<div>

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

绕啊绕啊

绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊

</div>

=======

图片居中

======

<center><img src="img/logo.gif"></center> <!--html-->

==============================================

<!---css-->

========

div{

margin:0 auto

padding:0px

}

<div id="logo">

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

</div>

CSS的定义：

#logo{width:500pxheight:300px}

#logo img{margin-top:100pxmargin-left:150px}

=================================

可以把让图片先居中，后环绕。