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

所属分类: 网络编程 / JavaScript 阅读数: 2042
收藏 0 赞 0 分享
这就出现一个问题,如果图片过小,或文字过长,就会出现文字把整个表格撑得很大,即占用了很多空间,显示效果也非常不美观。
网上也有许多解决办法,但要么复杂,要么不能解决跨浏览器问题,要么不能自适应图片大小变化。
在我的这个方法中,解决了: 不需要在代码中指定图片大小、跨浏览器、非常简单。最后的效果如下图所示,当文字过长时,它会自动换行以适应图片宽度:
基于表格的图文混排
方法如下:
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="https://cdn.zhanzhang360.cn/imgupload/002568/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如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多