CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)


Posted in Javascript onFebruary 14, 2009

这就出现一个问题,如果图片过小,或文字过长,就会出现文字把整个表格撑得很大,即占用了很多空间,显示效果也非常不美观。
网上也有许多解决办法,但要么复杂,要么不能解决跨浏览器问题,要么不能自适应图片大小变化。
在我的这个方法中,解决了: 不需要在代码中指定图片大小、跨浏览器、非常简单。最后的效果如下图所示,当文字过长时,它会自动换行以适应图片宽度:
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
方法如下:
1)图片及图片说明代码如下:
<table class="mod_img" width="10" align="left" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center"><a title="点击查看原图" href="/upload/20090214135145954.png" target="_blank"><img src="/upload/20090214135147104.png" vspace="0" border="0" hspace="0"></a></td></tr><tr><td align="center"><div class="mod_img_desc">香港殖民地最后的一面旗帜,由英国蓝旗和代表香港的殖民地徽所组成,1959年-1997年</div></td></tr></tbody></table>2)"mod_img" 的定义如下,它指定了表格及图片边框的CSS样式:
.mod_img {margin:6px; border:1px solid #AAAAAA; padding: 3px; }
.mod_img img{margin:3px; border:1px solid #AAAAAA; padding:0px; }
3)"mod_img_desc" 的定义如下,它指定了说明文本的CSS样式:
.mod_img_desc {font-size:12px;word-break:break-all;width:100%; overflow:auto;}
这里的关键是上边的 width="10" 这处,这是文本自适应图片宽度的关键,实际上10是个很小的值,一般图片都大于这个值,并且在表格中显示一个图片时,图片会按自己的实际大小把这个表格撑开,因此这个 width 并不会影响图片的显示,而在 3)处指定了文本的 width 为100%,就是说文字按照实际的宽度显示,而不管该宽度是多少,当文字超过宽度时,自动换行。
经过测试,该方法在 IE/Firefox/Safari/Opera等浏览器中均能完美正常工作!祝你愉快。

Javascript 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
浅谈React Event实现原理
Sep 20 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
JavaScript实现动态增加文件域表单
Feb 12 #Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 #Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 #Javascript
js 判断 enter 事件
Feb 12 #Javascript
JavaScript 克隆数组最简单的方法
Feb 12 #Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 #Javascript
JS IE和FF兼容性问题汇总
Feb 09 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
jquery实现点击弹出对话框
2020/02/08 jQuery
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
华为慧通笔试题
2016/04/22 面试题
法学毕业生自荐信
2013/11/13 职场文书
建议书的格式
2014/05/12 职场文书
借款担保书范文
2014/05/13 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书