CSS+Table圖文混排中實現文本自適應圖片寬度(超簡單+跨所有瀏覽器)

來源:互聯網
上載者:User

這就出現一個問題,如果圖片過小,或文字過長,就會出現文字把整個表格撐得很大,即佔用了很多空間,顯示效果也非常不美觀。
網上也有許多解決辦法,但要麼複雜,要麼不能解決跨瀏覽器問題,要麼不能自適應圖片大小變化。
在我的這個方法中,解決了: 不需要在代碼中指定圖片大小、跨瀏覽器、非常簡單。最後的效果如所示,當文字過長時,它會自動換行以適應圖片寬度:

方法如下:
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://files.jb51.net/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等瀏覽器中均能完美正常工作!祝你愉快。
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.