CSS解决文字环绕图片问题 - 网站建设 - 冰 点 网 络 菜 园

冰 点 网 络 菜 园 种 自 己 的 菜,给 自 己 吃

CSS解决文字环绕图片问题

CSS解决文字环绕图片问题

CSS解决文字环绕图片问题,上图是美工为一站点制作的图文并茂的新闻标题列表,采用表格进行布局,右上和下部分分布在两个单元格中,程序实现起来可不太容易:要么分两次查询,一次取4条,一次取5条;要么一次取出9条,再分在两个单元格中显示。能不能通过设置图片的属性,让文字和图片像Word中一样可

CSS解决文字环绕图片问题_脚本之家jb51.net网络整理
上图是美工为一站点制作的图文并茂的新闻标题列表,采用表格进行布局,右上和下部分分布在两个单元格中,程序实现起来可不太容易:要么分两次查询,一次取4条,一次取5条;要么一次取出9条,再分在两个单元格中显示。能不能通过设置图片的属性,让文字和图片像Word中一样可以四周环绕对齐?这样程序就不用理会图片,只负责一次读取显示就可以了。经测试将图片的float属性设置为left可解决我们的问题,效果如下图:
CSS解决文字环绕图片问题_脚本之家jb51.net网络整理
 
<div align="left"><img src="upload/201005021633153322.gif" style="float:left;" />
·新闻标题列表<br>
·新闻标题列表<br>
·新闻标题列表<br>
·新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表
</div> 

来源:http://kingoa.net/WEB/CSS/2010/0214/10673.html

如果想在IE6下面也正常显示,img标签要和文字处于同一div里面,img不要单独套在div里面,举例来说清楚一点:

<div align="left"><div class="pic_box"><img src="upload/201005021633153322.gif" style="float:left;" /></div><div class="content">·新闻标题列表<br>
·新闻标题列表<br>
·新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表<br>
·新闻标题列表新闻标题列表
</div> </div>

这样就有可能在IE6下面达不到效果,当然可能有解决方法,我没发现而已.

来源:网络        好像是 KO|a-学习资料网,因为图片是源自那里的

留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。