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="http://zsrimg.ikafan.com/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等浏览器中均能完美正常工作！祝你愉快。

赞 (0)

相关推荐

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

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

    这就出现一个问题,如果图片过小,或文字过长,就会出现文字把整个表格撑得很大,即占用了很多空间,显示效果也非常不美观.网上也有许多解决办法,但要么复杂,要么不能解决跨浏览器问题,要么不能自适应图片大小变化. 在我的这个方法中,解决了: 不需要在代码中指定图片大小.跨浏览器.非常简单.最后的效果如下图所示,当文字过长时,它会自动换行以适应图片宽度: 方法如下: 1)图片及图片说明代码如下: <table class="mod_img" width="10" ali

  • Android中使用TextView实现图文混排的方法

    向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到<img>标签. <img>只有一个src属性,该属性原则上应该指向一个图像地址或可以找到某个图像资源的唯一标识.但要注意的是,系统并不会直接根据src属性所指的值自动获取和显示图像,这一切都需要我们去做.说白了,src属性指的是什么只有开发者自己知道.开发者需要告诉系统src属性到底指的是什么,然后系统才会知道怎么做. 解析src属性值需要ImageGetter对象的getDrawable方法来完成.

  • Qt数据库应用之实现数据图文混排

    Qt数据库应用之实现数据图文混排

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 除了能够打印基本的文字信息数据到pdf和纸张,越来越多的应用需求还要求能够导出图片,并且要支持图文混排,相当于doc文档类似,当然也不会是太复杂的,类似于打印报表一样,有表格形式的文字描述,也有对应的图片插入其中,图文混排的应用场景还真不少比如医疗行业输出诊断结果往往都带了图片.于是针对这个需求特意开辟了新的类DataCreat专门生成报表的数据,将生成好的数据体直接传入给DataPrint类即可,如果有各种各样的不

  • 详解Android SpannableString多行图文混排的应用实战

    TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没入门的在门缝外看两眼也都会,哈哈,开玩笑.那要是设计在开发需求中要求类似微信聊天表情一样在TextView中插入表情图片呢? 有的小伙伴就会说啦,"TextView添加图片我会啊,不就是drawableLeft,drawableRight嘛!" 嗯 ~ 也行,算是一种方法,可这有一个限制,首先,图片只能在TextView的两端,其次,两端都只能设置一张图

  • IOS 图文混排（CoreText.framework）详解及实例

    IOS 图文混排（CoreText.framework）详解及实例

    IOS 图文混排(CoreText.framework)        本文主要介绍了IOS图文混排的资料,这里整理了在网上查找的内容,帮助理解,掌握这部分知识,以下就是整理的内容: 利用CORETEXT进行图文混排. 实现代码: void RunDelegateDeallocCallback( void* refCon ){ } CGFloat RunDelegateGetAscentCallback( void *refCon ){ NSString *imageName = (NSStri

  • iOS利用NSAttributedString实现图文混排效果示例

    iOS利用NSAttributedString实现图文混排效果示例

    前言 NSAttributedString 可以非常方便的实现文字排版和图文混排功能,UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示.话不多说了,下面来一起看看详细的介绍吧. 效果如下: 示例代码如下: 1-初始化可变属性字符串 NSMutableAttributedString *attributedString = [[NSMutableAttributedString a

  • Android下Button实现图文混排效果

    Android下Button实现图文混排效果

    Button实现图文混排效果,具体内容如下 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2.SpannableString的ImageSpan实现图文混排 二.代码实例 效果图: 一二三四是用的第一种方式 下面的用的第二种方式 代码: fry.Activity02 package fry; import com.example.buttonDemo1.R; import andro

  • JQuery实现table中tr上移下移的示例(超简单)

    表格样式 <table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td

  • Java 读取PDF中的文本和图片的方法

    本文将介绍通过Java程序来读取PDF文档中的文本和图片的方法.分别调用方法extractText()和extractImages()来读取. 使用工具:Free Spire.PDF for Java(免费版) Jar文件获取导入: 方法1:通过官网下载jar文件包.下载后,解压文件,并将lib文件夹下的Spire.Pdf.jar文件导入java程序.导入后如下图: 方法2: 可通过maven仓库安装导入. Java代码示例 import com.spire.pdf.*; import java

  • Java 在PPT中添加文本和图片超链接的实现方法

    在文档中添加超链接,可以快速从当前文档跳转至指定的网页或打开指定的外部文件.前文中我们介绍过如何使用Java程序来为Word文档和Excel工作表添加超链接.本文将演示如何在PPT中添加文本和图片超链接. 使用工具:Free Spire.Presentation for Java(免费版)Jar文件获取及导入: 方法1:通过官网下载获取jar包.解压后将lib文件夹下的Spire.Presentation.jar文件导入Java程序.(如下图) 方法2:通过maven仓库安装导入.具体安装教程参

随机推荐