This has a problem, if the picture is too small, or the text is too long, there will be text to the entire form to support very large, that is, occupy a lot of space, the display effect is very not beautiful.
There are a number of solutions on the web, but they are either complex or do not solve cross-browser problems or adapt to the size of the picture.
In my approach, it solves the problem of not having to specify a picture size, cross-browser, or simple code. The final effect, as shown in the following illustration, is that when the text is too long, it wraps automatically to fit the width of the picture:
The method is as follows:
1 picture and picture Description code as follows:
<table class= "mod_img" width= "align=" "left" border= "0" cellpadding= "0" cellspacing= "0" ><tbody><tr ><TD align= "center" ><a title= "click to view Original" href= "/upload/20090214135145954.png" target= "_blank" ></a></td ></TR><TR><TD align= "center" ><div class= "Mod_img_desc" > The last banner of Hong Kong colony, Composed of the British Blue Flag and the colonial emblem representing Hong Kong, 1959-1997 </DIV></TD></TR></TBODY></TABLE>2) "MOD_IMG" is defined as follows, It specifies the CSS style for table and picture borders:
. 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" is defined as follows, which specifies the CSS style of the description text:
. mod_img_desc {font-size:12px;word-break:break-all;width:100%; overflow:auto;}
The key here is the top width= "10", this is the text adaptive image width of the key, in fact, 10 is a very small value, the general picture is greater than this value, and in the table display a picture, the picture will be the actual size of their own to open the table, so this width Does not affect the display of the picture, and at 3 specifies the width of the text to 100%, which means that the text is displayed in the actual width, regardless of the width, and when the text exceeds the width, the line wraps automatically.
After testing, this method in Ie/firefox/safari/opera and other browsers can be perfectly normal work! Have a nice day.
