CSS+Table圖文混排中實(shí)現(xiàn)文本自適應(yīng)圖片寬度(超簡單+跨所有瀏覽器)
更新時(shí)間:2009年02月14日 13:51:48 作者:
最近在為學(xué)樂網(wǎng)開發(fā)圖片顯示功能時(shí)遇到一個(gè)問題:在一個(gè)table中有兩行,上邊顯示圖片(大小隨機(jī)),下邊顯示對圖片的相關(guān)說明(文字長度隨機(jī))
這就出現(xiàn)一個(gè)問題,如果圖片過小,或文字過長,就會(huì)出現(xiàn)文字把整個(gè)表格撐得很大,即占用了很多空間,顯示效果也非常不美觀。
網(wǎng)上也有許多解決辦法,但要么復(fù)雜,要么不能解決跨瀏覽器問題,要么不能自適應(yīng)圖片大小變化。
在我的這個(gè)方法中,解決了: 不需要在代碼中指定圖片大小、跨瀏覽器、非常簡單。最后的效果如下圖所示,當(dāng)文字過長時(shí),它會(huì)自動(dòng)換行以適應(yīng)圖片寬度:

方法如下:
1)圖片及圖片說明代碼如下:
<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="/upload/20090214135147104.png" vspace="0" border="0" hspace="0"></a></td></tr><tr><td align="center"><div class="mod_img_desc">香港殖民地最后的一面旗幟,由英國藍(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" 的定義如下,它指定了說明文本的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è)表格撐開,因此這個(gè) width 并不會(huì)影響圖片的顯示,而在 3)處指定了文本的 width 為100%,就是說文字按照實(shí)際的寬度顯示,而不管該寬度是多少,當(dāng)文字超過寬度時(shí),自動(dòng)換行。
經(jīng)過測試,該方法在 IE/Firefox/Safari/Opera等瀏覽器中均能完美正常工作!祝你愉快。
網(wǎng)上也有許多解決辦法,但要么復(fù)雜,要么不能解決跨瀏覽器問題,要么不能自適應(yīng)圖片大小變化。
在我的這個(gè)方法中,解決了: 不需要在代碼中指定圖片大小、跨瀏覽器、非常簡單。最后的效果如下圖所示,當(dāng)文字過長時(shí),它會(huì)自動(dòng)換行以適應(yīng)圖片寬度:
方法如下:
1)圖片及圖片說明代碼如下:
<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="/upload/20090214135147104.png" vspace="0" border="0" hspace="0"></a></td></tr><tr><td align="center"><div class="mod_img_desc">香港殖民地最后的一面旗幟,由英國藍(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" 的定義如下,它指定了說明文本的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è)表格撐開,因此這個(gè) width 并不會(huì)影響圖片的顯示,而在 3)處指定了文本的 width 為100%,就是說文字按照實(shí)際的寬度顯示,而不管該寬度是多少,當(dāng)文字超過寬度時(shí),自動(dòng)換行。
經(jīng)過測試,該方法在 IE/Firefox/Safari/Opera等瀏覽器中均能完美正常工作!祝你愉快。
您可能感興趣的文章:
- css列表標(biāo)簽list與表格標(biāo)簽table詳解
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
- jquery css 設(shè)置table的奇偶行背景色示例
- JavaScript和CSS通過expression實(shí)現(xiàn)Table居中顯示
- 拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
- css之使table也能overflow:hidden
- 推薦一個(gè)好看Table表格的css樣式代碼詳解
相關(guān)文章
用html5 js實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕達(dá)到瀏覽器全屏效果
點(diǎn)擊一個(gè)按鈕要實(shí)現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API,就可以實(shí)現(xiàn)全屏幕的效果2014-05-05
JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)點(diǎn)擊事件操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁面
這篇文章主要為大家詳細(xì)介紹了JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
js 將多個(gè)對象合并成一個(gè)對象 assign方法的實(shí)現(xiàn)
這篇文章主要介紹了js 將多個(gè)對象合并成一個(gè)對象 assign方法的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09

