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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js实现批量删除功能
Aug 27 Javascript
JS实现页面侧边栏效果探究
Jan 08 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 list()函数的详解
2013/06/05 PHP
php 强制下载文件实现代码
2013/10/28 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
个人安全承诺书
2014/05/22 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
公积金接收函格式
2015/01/30 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS