HTMer » 编程开发 » 用CSS实现图文混排效果

用CSS实现图文混排效果

我们在浏览一些大型门户网站的时候常常会看到图文混排效果的文章(如图在左边,字在图的上、右、下边),那么如何才能实现这样的效果呢,用CSS的float属性可以完成图文混排,再配合其他元素,如margin,可以达到比较好的效果。

<style>
.pic {
float: left;
border: 1px solid #cccccc;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
</style>

调用的时候只要指定class就可以了,如:

<img src="*.gif" class="pic" />这里是文字内容。

这样就完成了用CSS实现图文混排效果。 

顶一下 ▲()   踩一下 ▼()

相关文章