Before Bowen: HTML layout and typography 2 How to set div always centered relative to the page is typeset with div, div three are cut, the picture at the top of the lower part of the picture, tiled bar, in the middle of the middle of the div does not have height the content, size of the area is not fixed, easy to add or delete content no longer post-change pattern.
Bowen front tiled with div, in addition, with a table can achieve this effect, table td should be noted padding cleared, otherwise the unit Gerry td padding down there, there will be cracks. Image Height is the height of cut in accordance with the cell, so is mainly caused by the upper and lower padding.
As shown, the first table layout is not set in the padding td is 0, the browser developer patterns can see the presence of padding.
Typesetting second table td are set in the padding is 0, so no cracks.
Pictures are based on the same cell size cropped, image size and cell size.
As shown, the first cracks appeared in the table, also appeared FIG bottom line, the reason is due to the presence of padding results in the cell itself than the height of the slice image cropping height.
First td, the remaining areas show a white line, crack-like (top panel upper white region)
second tile is due td, the extra pddding paved.
The third is due td base map, not the white area at the top of the base map, color, extra parts are covered with pictures of the top surface. (On the base map color, the color of the top of the base map tile processing)
Test code:
<body> <h5>存在padding，有裂缝和问题的：</h5> <div id="t2"> <table width="900px" border=0 style="border-collapse:collapse;"> <tr> <td width="900px" height="165px" style="background-image:url(./images/top.png);"></td> </tr> <tr> <td width="900px"style = "background-Image: URL (./ Images / mid.png); padding-left: 50px; padding-right: 50px;" > network official sample is mixed deployment LodopFuncs.js already written judgment. < Br > The client is a browser plug-np support, 32-bit browser, you will be prompted to download the 32-bit plug-ins Lodop: install_lodop32.exe < br > Client browser plug-np support, 64-bit browser, you will Lodop prompted to download the 64-bit plug-ins: install_lodop64.exe < br > client browser does not support plug-ins np (high version of Google judgment as Firefox, etc.), you will be prompted to download C-Lodop way: CLodop_Setup_for_Win32NT.exe </ td > </ TR > < TR > < TD width = "900px" height = "75px" style = "background-Image: URL (.></td> </tr> </table> </div> <h5>清除padding，正常的：</h5> <div id="t1"> <table width="900px" border=0 style="border-collapse:collapse;"> <tr> <td width="900px" height="165px" style="background-image:url(./images/top.png);padding:0px;"></td> </TR > < TR > < TD width = "900px" style = "background-Image: URL (./ Images / mid.png); padding: 0px; padding-left: 50px; padding-right: 50px;" > official website comp Example LodopFuncs.js hybrid deployment is already written is determined. < Br > The client is a browser plug-np support, 32-bit browser, you will be prompted to download the 32-bit plug-ins Lodop: install_lodop32.exe < br > Client browser plug-np support, 64-bit browser, you will Lodop prompted to download the 64-bit plug-ins: install_lodop64.exe < br > client browser does not support plug-ins np (high version of Google judgment as Firefox, etc.), you will be prompted to download C-Lodop way: CLodop_Setup_for_Win32NT.exe </ td > </ TR > < TR > <="900px" height="75px" style="background-image:url(./images/bottom.png);padding:0px;"></td> </tr> </table> </div> </body>
Icon:
Cell size and the image size is the same, but when the height of the tile beyond the point on the map and lead to problems with the figure below.
After the browser that comes with developer mode to see, turned out to be td have a default padding, like after clearing.
Also can count the size of the padding on the images will be cropped, but not as good as td and consistent picture is better.
