The web page table or div layer is expanded in the web page

Time:2022-5-5

When we design web pages, we will always encounter some unpleasant things. The most common thing is to find that the displayed pages are opened after adding content in the background, resulting in extremely unsightly web pages. In the past, we basically designed forms. Naturally, there are many solutions for forms on the Internet. Now there are DIV CSS standard design, and we rarely see relevant good methods. Now Xiaoxiang online summarizes the good methods that we usually find to prevent forms from being opened and shares them with you.
1、 Directly set the image size in the web page, such as code: < img SRC=“ https://www.jb51.net/images/jb51com.jpg “Width =” 600 “height =” 500 “border =” 0 “>, although it can limit the size of the picture, you need to manually modify the size of the picture before uploading it, otherwise the uploaded picture will be deformed.
2、 Use the following code: < img SRC=“ https://www.jb51.net/images/jb51com.jpg ” onload=”javascript:if(this.width>600}{this.resized=true;this.style.width=600;} “>
This method will automatically scale down to the specified width when calling the picture, which will not cause the deformation of the picture and break the table. However, the disadvantage is that if the picture is too large, it will be displayed in the original size of the picture first in the process of picture download, that is, in the process of picture display. At this time, it will break the table, and the page is very ugly. Second, when the picture is fully displayed, the picture will automatically shrink.
3、 We can limit the size of the table according to its attributes to prevent it from being stretched out. For example, add the code “style =” table layout: fixed; word wrap: break word; word break; break all; “in < table width =” 600 “border =” 0 “cellpadding =” 0 “cellspacing =” 0 “>, Where “table layout: fixed;” The purpose is to fix the table layout, which can effectively prevent the table from being opened, “word wrap: break word;” It is used to control line feed, that is, to force line feed. This needs to be used when there are many text contents, especially when repeated contents appear. If line feed is not performed, the table will be opened; And “word break: break all;” It can solve the problem that the framework of IE is supported by English (non Asian language bank), but it will not force line feed and only display the contents in the width of the table. Generally, only “style =” table layout: fixed; word wrap: break word; “is used Can. Of course, the statements called above can be defined in CSS, such as

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;
}

Where max width: 600px; In IE7, Firefox and other non IE browsers, 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 size of the picture is greater than 600px, it will be automatically reduced to 600px, which is effective in IE6; Overflow: hidden; It refers to hiding the part beyond the set size to avoid the deformation of the table caused by the failure of controlling the size of the picture.
5、 Finally, summarize the most practical code:
If it is a form, please use:

table {
table-layout: fixed;
word-break: break-all;
}

For div layer, use:

div {
table-layout: fixed;
word-wrap: break-word;
Width: add width;
overflow: hidden; (make the extra ones not displayed.)
}