使用CSS解决文字环绕图片问题的代码

所属分类: 网络编程 / CSS/HTML 阅读数: 1821
收藏 0 赞 0 分享

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



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
更多精彩内容其他人还在看

推荐深入理解css中的position定位和z-index属性

推荐深入理解css中的position定位和z-index属性
收藏 0 赞 0 分享

不错的10个你未必知道的CSS技巧

不错的10个你未必知道的CSS技巧
收藏 0 赞 0 分享

一点小小的创意css鼠标放上去则显示电话号码

一点小小的创意css鼠标放上去则显示电话号码
收藏 0 赞 0 分享

固定表格的高度超过指定高度就隐藏的方法

固定表格的高度超过指定高度就隐藏的方法
收藏 0 赞 0 分享

推荐个Css的filter常用滤波器属性及语句大全

推荐个Css的filter常用滤波器属性及语句大全
收藏 0 赞 0 分享

淘宝段正淳的css笔记大全第1/4页

淘宝段正淳的css笔记大全
收藏 0 赞 0 分享

CSS实现的一个图片放大展示的一种思路

CSS实现的一个图片放大展示的一种思路
收藏 0 赞 0 分享

用css滤镜实现的文字描边效果的代码

用css滤镜实现的文字描边效果的代码
收藏 0 赞 0 分享

用css实现的带阴影的表格效果的代码

用css实现的带阴影的表格效果的代码
收藏 0 赞 0 分享

又一实用的常用CSS缩写语法收集

又一实用的常用CSS缩写语法收集
收藏 0 赞 0 分享
查看更多