用CSS实现HTML网页图文混排效果

 

在编写www.24game.com.cn网页的时候，我想在右侧站点介绍区域实现HTML图文混排功能，效果如下所示：

 

原来的HTML代码内容（因为模板取自别的网站，有点乱）：

<div class="profile-datablock">
<div class="profile-content">
<div class="profile-img"><img src="http://www.24game.com.cn/photo.gif" alt="24点游戏爱好者的照片" width="80" />
 <strong>24点游戏爱好者</strong>
</div>
<div class="profile-data">
 <div class="profile-textblock">24点游戏是一个有趣的益智数学游戏， 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目，那么请一定收藏24点大全网站哦！
</div>
</div>
<div class="rssline1">
</div></div>
</div>

修改之后的HTML代码内容，做了很大的简化：

<div class="profile-datablock">
<div class="profile-content">
<img src="http://www.24game.com.cn/photo.gif" alt="24点游戏爱好者的照片" width="80" height="120" style="float:left;margin-right:8px;" />
24点游戏是一个有趣的益智数学游戏， 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目，那么请一定收藏24点大全网站哦！
</div>
</div>

在HTML中实现图文混排的关键点：设置float样式，比如 float:left。

因为默认情况下文字会紧贴着图片，所以要使用margin样式来调整，比如 margin-right:8px。

 

PS：24点大全是我进行的一个网站SEO实验站点，目前已被百度和Google收录，它是一个关于24点游戏的站点，包括24点游戏介绍、24点题目、24点算法、24点计算器，有兴趣的童鞋可以访问一下www.24game.com.cn，欢迎提出宝贵意见。

 

• 源文【用CSS实现HTML网页图文混排效果】最新版，请访问：
     http://www.vktone.com/articles/image-text-mixed-in-css.html

 

 

评论

1 楼 914412060 2013-01-16  

汗，我也遇到了这个问题啊，感谢楼主