|
|
網(wǎng)上也有許多解決辦法，但要么復(fù)雜，要么不能解決跨瀏覽器問(wèn)題，要么不能自適應(yīng)圖片大小變化。
在我的這個(gè)方法中，解決了： 不需要在代碼中指定圖片大小、跨瀏覽器、非常簡(jiǎn)單。最后的效果如下圖所示，當(dāng)文字過(guò)長(zhǎng)時(shí)，它會(huì)自動(dòng)換行以適應(yīng)圖片寬度：
方法如下：
1）圖片及圖片說(shuō)明代碼如下：
<table class="mod_img" width="10" align="left" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center"><a title="點(diǎn)擊查看原圖" href="/upload/20090214135145954.png" target="_blank"><img src="http://files.jb51.NET/upload/20090214135147104.png" vspace="0" border="0" hspace="0"></a></td></tr><tr><td align="center"><div class="mod_img_desc">香港殖民地最后的一面旗幟，由英國(guó)藍(lán)旗和代表香港的殖民地徽所組成，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" 的定義如下，它指定了說(shuō)明文本的CSS樣式：
.mod_img_desc {font-size:12px;word-break:break-all;width:100%; overflow:auto;}
這里的關(guān)鍵是上邊的 width="10" 這處，這是文本自適應(yīng)圖片寬度的關(guān)鍵，實(shí)際上10是個(gè)很小的值，一般圖片都大于這個(gè)值，并且在表格中顯示一個(gè)圖片時(shí)，圖片會(huì)按自己的實(shí)際大小把這個(gè)表格撐開(kāi)，因此這個(gè) width 并不會(huì)影響圖片的顯示，而在 3）處指定了文本的 width 為100%，就是說(shuō)文字按照實(shí)際的寬度顯示，而不管該寬度是多少，當(dāng)文字超過(guò)寬度時(shí)，自動(dòng)換行。
經(jīng)過(guò)測(cè)試，該方法在 IE/Firefox/Safari/Opera等瀏覽器中均能完美正常工作！祝你愉快。
JavaScript技術(shù)：CSS+Table圖文混排中實(shí)現(xiàn)文本自適應(yīng)圖片寬度（超簡(jiǎn)單+跨所有瀏覽器），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
