When we design web pages, we always encounter some unpleasant things. The most common one is that after adding content in the background, we find that the displayed page is spread open, which makes the web page extremely unsightly. In the past, people basically designed tables, so there are naturally many solutions online. Now there are div css standard designs, and they rarely see related good methods. Now Xiaoxiang Online summarizes the good methods found in daily life to prevent the tables from being spread out and share them with you.
1. Set the image size directly on the web page, for example, the code: <img src=http://www.CuoXIn.com/images/CuoXIncom.jpg width=600 height=500 border=0>. Although this can limit the image size, you need to manually modify the image size before uploading the image, otherwise the uploaded image will deform.
2. Use the following code: <img src=http://www.CuoXIn.com/images/CuoXIncom.jpg onload=javascript:if(this.width>600}{this.resized=true;this.style.width=600;}>
This method will automatically shrink to the specified width when calling the picture, which will not cause the picture to be deformed, and will not break the table. However, the disadvantage is that if the picture is too large, during the image download process, that is, during the image display process, it will first be displayed in the original size of the picture, which will break the table, and the page will be ugly. Second, when the picture is fully displayed, the picture will automatically shrink.
3. We can limit the size of the table to prevent it from being stretched out, for example, add the code in <table width=600 border=0 cellpadding=0 cellpacing=0> style=table-layout:fixed;word-wrap:break-word;word-break;break-all;, where table-layout:fixed; is to fix the table layout, which can effectively prevent the table from being stretched out. Word-wrap:break-word; is to control line breaks, that is, to enforce line breaks. This needs to be used when there is a lot of text content. Extraordinary duplicate content appears and if the line breaks are not executed, the table will be stretched out; and word-break: break-all; It can solve the problem that the IE framework is spread out by English (non-Asian text lines), but it will not force a line wrap, and only the content in the table width is displayed. Generally speaking, just use style=table-layout:fixed;word-wrap:break-word; Of course, the statements called above can be defined in css, for example
| table { table-layout: fixed; word-wrap:break-word; } |
4. Use css to control the adaptive size of the picture, the code is as follows:
| img { max-width: 600px; width:expression(this.width > 600 ? 600px : this.width); overflow:hidden; } |
Among them, max-width:600px; in other non-IE browsers such as IE7 and FireFox, the maximum width is 600px, but it is invalid in IE6; width:600px; in all browsers, the size of the picture is 600px. When the picture size is greater than 600px, it will automatically shrink to 600px, which is valid in IE6; and overflow:hidden; refers to hiding the part beyond the set size to avoid the deformation of the table due to failure to control the image size. 2 pages in total Previous page 12 Next page